Diego Pinho

Bacharel em Ciência da Computação pela PUCSP e MBA em Gestão da Tecnologia da Informação na FIAP. Autor do livro ECMAScript 6 - Entre de cabeça no futuro do JavaScript. Cofundador da Code Prestige e Community Manager no iMasters.

Publicou
113
Artigo(s)
Visualizados
1276900
Vezes
Desde
2013

Artigos Publicados

APIs e Microsserviços7 jul, 2025

Validações mais eficazes na sua API com a biblioteca Joi

Para garantir o funcionamento correto das nossas APIs e evitar problemas é super importante sempre validar a entrada dos nossos usuários. No entanto…

JavaScript23 jun, 2025

Arquitetura de Microsserviços em Node com o MoleculerJS

Montar um projeto na arquitetura de Microsserviços … ecossistema Node? Como tudo na tecnologia, há várias formas diferentes; no… framework Moleculer.

Desenvolvimento11 jun, 2025

Dica de ouro: Saiba como fazer uma navbar responsiva

Existem várias formas criativas e técnicas de lidar com responsividade (ex: Flexbox, Media Queries, CSS Grid)… Um claro exemplo é a navbar responsiva.

CSS28 mai, 2025

Elementos Fantasmas: O truque de UX para carregamentos mais rápidos!

Não tem nada pior para a experiência do usuário do que acessar um site e ter a tela vazia… É nestas situações que usamos o elementos fantasmas! (bu!) 👻

CSS19 mai, 2025

Popups nativos no navegador (Popover API) sem JavaScript!

Popups estão em toda parte. Eles são amplamente utilizados para diversos fins, como exibir anúncios, captar leads (através de formulários), fornecer…

JavaScript16 abr, 2025

Como enviar e-mails com o JavaScript usando o EmailJS

Como enviar e-mails com o JavaScript usando o EmailJS. Ter um formulário de contato no seu site pessoal ou do seu negócio geralmente é uma boa ideia, afinal

JavaScript11 mar, 2025

Como usar Faker.js para gerar dados falsos (mas realistas) em JavaScript

No desenvolvimento de software, testar… É aí que entra o Faker.js, uma poderosa biblioteca para gerar dados fictícios de maneira rápida e eficiente.

Cloud Computing27 fev, 2025

5 serviços gratuitos na cloud para bancos de dados Postgres

Para conseguir expor nossos projetos pessoais, MVPs e até mesmo projetos para processos seletivos de forma gratuita, vamos … dados do tipo Postgres.

JavaScript11 set, 2024

Alertas bonitos, responsivos e customizados com o SweetAlert2

Alertas bonitos, responsivos e customizados com o SweetAlert2. Quando estamos falando de desenvolvimento web, há praticamente duas coisas que …

Desenvolvimento6 ago, 2024

Recuperando computadores antigos com o ChromeOS Flex

Se você comprou um computador …. como o Google Chrome e afins. Em suma, enquanto o hardware … os softwares exigem cada vez mais… com o ChromeOS Flex…

visualizando 10 de 113

)).required(),\r\n});\r\n\r\napp.post(\"\u002Fusers\", (req, res) => { \r\n const user = req.body; \r\n if(!username || !email || !year || !password) {\r\n return res.status(422).send(\"Incomplete data.\");\r\n }\r\n \r\n \u002F\u002F restante do código \r\n});\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\r\n\u003Cul class=\"\"\u003E\r\n \t\u003Cli id=\"340f\" class=\"my mz ho na b nb nc nd ne nf ng nh ni fk nj nk nl fn nm nn no fq np nq nr ns pi pj pk bk\" data-selectable-paragraph=\"\"\u003EUsamos o \u003Ccode class=\"cx qa qb qc pr b\"\u003Ejoi.object()\u003C\u002Fcode\u003E para definir o schema e então usamos o \u003Ccode class=\"cx qa qb qc pr b\"\u003Estring()\u003C\u002Fcode\u003E, \u003Ccode class=\"cx qa qb qc pr b\"\u003Eemail()\u003C\u002Fcode\u003E, \u003Ccode class=\"cx qa qb qc pr b\"\u003Emin()\u003C\u002Fcode\u003E, \u003Ccode class=\"cx qa qb qc pr b\"\u003Emax()\u003C\u002Fcode\u003E, e assim por diante para fazer as validações necessárias.\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"3e63\" class=\"my mz ho na b nb pl nd ne nf pm nh ni fk pn nk nl fn po nn no fq pp nq nr ns pi pj pk bk\" data-selectable-paragraph=\"\"\u003EAgora, ao invés de ficar encadeando ifs e elses, simplesmente usamos esse objeto de referência para validar a informação que o usuário nos enviou:\u003C\u002Fli\u003E\r\n\u003C\u002Ful\u003E\r\n\u003Cpre\u003E\u003Ccode class=\"line-numbers language-javascript\"\u003Eimport joi from \"joi\";\r\n\r\nconst userSchema = joi.object({\r\n username: joi.string().min(3).max(10).required(),\r\n email: joi.string().email().required(),\r\n year: joi.number().integer().min(1900).max(2024).required(),\r\n password: joi.string().pattern(new RegExp('^[a-zA-Z0-9]{3,30} window.__SERVER_VARS__ = {"applicationRestUrl":"https:\u002F\u002Fadmin.imasters.com.br\u002Fwp-json","applicationBaseUrl":"https:\u002F\u002Fadmin.imasters.com.br"} )).required(),\r\n});\r\n\r\napp.post(\"\u002Fusers\", (req, res) => { \r\n const user = req.body; \r\n const validation = userSchema.validate(user, { abortEarly: false });\r\n if (validation.error) {\r\n const errors = validation.error.details.map(detail => detail.message)\r\n return res.status(422).send(errors)\r\n }\r\n \r\n \u002F\u002F restante do código \r\n});\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\r\n\u003Ch3 id=\"1192\" class=\"qd os ho bf ot qe qf qg fg qh qi qj fj qk ql qm qn qo qp qq qr qs qt qu qv qw bk\"\u003ERepositório\u003C\u002Fh3\u003E\r\n\u003Cp id=\"b72d\" class=\"pw-post-body-paragraph my mz ho na b nb pa nd ne nf pb nh ni fk pc nk nl fn pd nn no fq pe nq nr ns gp bk\" data-selectable-paragraph=\"\"\u003E\u003Ca class=\"ag pz\" href=\"https:\u002F\u002Fgithub.com\u002FProfessor-DiegoPinho\u002Fvalidacao-joi\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003Ehttps:\u002F\u002Fgithub.com\u002FProfessor-DiegoPinho\u002Fvalidacao-joi\u003C\u002Fa\u003E\u003C\u002Fp\u003E","excerpt":"\u003Cp\u003EPara garantir o funcionamento correto das nossas APIs e evitar problemas é super importante sempre validar a entrada dos nossos usuários. No entanto…\u003C\u002Fp\u003E\n","link":"https:\u002F\u002Fimasters.com.br\u002Fapis-microsservicos\u002Fvalidacoes-mais-eficazes-na-sua-api-com-a-biblioteca-joi","date":"7 jul, 2025","thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2025\u002F07\u002F26183954\u002FAPIs.jpg","externalMention":"","author":{"id":"144418","thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2018\u002F05\u002F30171243\u002Fdiego-pinho.jpg","name":"Diego Pinho","description":"Bacharel em Ciência da Computação pela PUCSP e MBA em Gestão da Tecnologia da Informação na FIAP. Autor do livro ECMAScript 6 - Entre de cabeça no futuro do JavaScript. Cofundador da Code Prestige e Community Manager no iMasters.","slug":"diegopinho","url":"https:\u002F\u002Fimasters.com.br\u002Fperfil\u002Fdiegopinho","registered":"2013-08-13 18:00:53","social":{"linkedin":null,"youtube":null,"facebook":"","twitter":"https:\u002F\u002Ftwitter.com\u002FDiegoPinho","instagram":null,"github":null,"url":"http:\u002F\u002Fwww.diegopinho.com.br","mail":"diego.pinho@imasters.com.br"},"articles_count":113,"views_count":1276900,"certifications":null,"conquests":null,"office":null},"categories":[{"title":"APIs e Microsserviços","slug":"apis-microsservicos","id":4257,"link":"https:\u002F\u002Fimasters.com.br\u002Fapis-microsservicos"},{"title":"JavaScript","slug":"javascript","id":7220,"link":"https:\u002F\u002Fimasters.com.br\u002Fjavascript"}],"tags":[{"title":"api","slug":"api","id":187,"link":"https:\u002F\u002Fimasters.com.br\u002Fapi"},{"title":"javascript","slug":"javascript-2","id":214,"link":"https:\u002F\u002Fimasters.com.br\u002Fjavascript-2"},{"title":"node","slug":"node","id":236,"link":"https:\u002F\u002Fimasters.com.br\u002Fnode"},{"title":"nodejs","slug":"nodejs","id":3153,"link":"https:\u002F\u002Fimasters.com.br\u002Fnodejs"}],"relateds":[],"seo":[],"type":"post"},{"id":163616,"title":"Arquitetura de Microsserviços em Node com o MoleculerJS","content":"\u003Cp id=\"618f\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EMontar um projeto na arquitetura de Microsserviços não é tão trivial e nem tão necessário quanto a maior parte das pessoas desenvolvedoras iniciantes imaginam que seja.\u003C\u002Fp\u003E\r\n\u003Cp id=\"c011\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EMuitos escutam o termo e, por ele estar na moda, já acham que precisam sair aplicando sem mesmo entender o que ela é, pra que serve e porque faria sentido (ou não) usá-la. Na vida real não é bem assim que funciona.\u003C\u002Fp\u003E\r\n\u003Cp id=\"4768\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EA arquitetura de microsserviços é incrível e pode resolver vários complexos. Mas aí é que está o X da questão: quais problemas complexos que ele resolve? Dificilmente um projeto pessoal pequeno terá qualquer tipo desses problemas.\u003C\u002Fp\u003E\r\n\u003Cp id=\"b8cd\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EO caminho natural das nossas aplicações é ser construída em um monolito até que faça sentido mudar a sua arquitetura. Isso se fizer sentido. Você sabia que o próprio \u003Ca class=\"ag or\" href=\"https:\u002F\u002Fstackoverflow.com\u002F\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003E\u003Cstrong class=\"ny hp\"\u003EStack Overflow\u003C\u002Fstrong\u003E\u003C\u002Fa\u003E é um monolito?\u003C\u002Fp\u003E\r\n\u003Cp id=\"3c04\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EDito isso, estudar esse tipo de arquitetura e aplicá-la para aprender seus conceitos e detalhes é sim muito interessante. Experimentar um pouco dessa arquitetura te ajudará a ganhar experiência para então tomar melhores decisões no futuro.\u003C\u002Fp\u003E\r\n\u003Cp id=\"5472\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EComo então fazer para aplicar essa arquitetura dentro do ecossistema Node?\u003C\u002Fp\u003E\r\n\u003Cp id=\"c54b\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EComo tudo na tecnologia, há várias formas diferentes; no entanto, recentemente encontrei uma bem interessante por meio do framework \u003Ca class=\"ag or\" href=\"https:\u002F\u002Fmoleculer.services\u002Findex.html\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003E\u003Cstrong class=\"ny hp\"\u003EMoleculer\u003C\u002Fstrong\u003E\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\r\n\u003Cp id=\"1aaa\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EBora explorá-lo?\u003C\u002Fp\u003E\r\n\u003Cp id=\"1816\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003E—\u003C\u002Fp\u003E\r\n\r\n\u003Ch2 id=\"5fed\" class=\"os ot ho bf ou ov ow ox fg oy oz pa fj pb pc pd pe pf pg ph pi pj pk pl pm pn bk\"\u003E\u003Cspan style=\"font-size: 18pt;\"\u003EO Framework Moleculer\u003C\u002Fspan\u003E\u003C\u002Fh2\u003E\r\n\u003Cul class=\"\"\u003E\r\n \t\u003Cli id=\"1b86\" class=\"nw nx ho ny b nz po ob oc od pp of og fk pq oi oj fn pr ol om fq ps oo op oq qb qc qd bk\" data-selectable-paragraph=\"\"\u003EO Moleculer é um framework para Node.js que nos ajuda a criar aplicações usando a arquitetura de microsserviços.\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"2375\" class=\"nw nx ho ny b nz qe ob oc od qf of og fk qg oi oj fn qh ol om fq qi oo op oq qb qc qd bk\" data-selectable-paragraph=\"\"\u003EAplicar a arquitetura de microsserviços não se resume a apenas quebrar a aplicação em várias menores. Existem conceitos e técnicas para conseguir fazer isso da melhor forma possível, e o framework já vem integrado com vários deles, como por exemplo:\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"185e\" class=\"nw nx ho ny b nz qe ob oc od qf of og fk qg oi oj fn qh ol om fq qi oo op oq qb qc qd bk\" data-selectable-paragraph=\"\"\u003EAPI Gateway;\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"4a5b\" class=\"nw nx ho ny b nz qe ob oc od qf of og fk qg oi oj fn qh ol om fq qi oo op oq qb qc qd bk\" data-selectable-paragraph=\"\"\u003ELoad Balancer;\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"b5be\" class=\"nw nx ho ny b nz qe ob oc od qf of og fk qg oi oj fn qh ol om fq qi oo op oq qb qc qd bk\" data-selectable-paragraph=\"\"\u003EFault Tolerance;\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"d3d4\" class=\"nw nx ho ny b nz qe ob oc od qf of og fk qg oi oj fn qh ol om fq qi oo op oq qb qc qd bk\" data-selectable-paragraph=\"\"\u003EService Discovery;\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"3499\" class=\"nw nx ho ny b nz qe ob oc od qf of og fk qg oi oj fn qh ol om fq qi oo op oq qb qc qd bk\" data-selectable-paragraph=\"\"\u003EEtc.\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"1473\" class=\"nw nx ho ny b nz qe ob oc od qf of og fk qg oi oj fn qh ol om fq qi oo op oq qb qc qd bk\" data-selectable-paragraph=\"\"\u003ENão vale a pena ficar explicando cada um desses pontos agora porque esse assunto é bem denso. Vamos tentar montar um projetinho na prática com essa arquitetura e naturalmente descobriremos o que eles são e como usá-los.\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"9209\" class=\"nw nx ho ny b nz qe ob oc od qf of og fk qg oi oj fn qh ol om fq qi oo op oq qb qc qd bk\" data-selectable-paragraph=\"\"\u003ECombinado?\u003C\u002Fli\u003E\r\n\u003C\u002Ful\u003E\r\n\u003Ch3 id=\"06b7\" class=\"os ot ho bf ou ov ow ox fg oy oz pa fj pb pc pd pe pf pg ph pi pj pk pl pm pn bk\"\u003E\u003Cspan style=\"font-size: 18pt;\"\u003EAplicação prática\u003C\u002Fspan\u003E\u003C\u002Fh3\u003E\r\n\u003Cul class=\"\"\u003E\r\n \t\u003Cli id=\"073b\" class=\"nw nx ho ny b nz po ob oc od pp of og fk pq oi oj fn pr ol om fq ps oo op oq qb qc qd bk\" data-selectable-paragraph=\"\"\u003EComo eu disse, o caminho natural de uma aplicação é nascer do monolito e, a medida que sua complexida se tornar muito grande, a “quebramos” em aplicações menores.\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"effd\" class=\"nw nx ho ny b nz qe ob oc od qf of og fk qg oi oj fn qh ol om fq qi oo op oq qb qc qd bk\" data-selectable-paragraph=\"\"\u003EPartindo dessa ideia, vamos começar da seguinte aplicação:\u003C\u002Fli\u003E\r\n\u003C\u002Ful\u003E\r\n\u003Cfigure class=\"pt pu pv pw px my nh ni paragraph-image\"\u003E\r\n\u003Cdiv class=\"nr ns ee nt bh nu\" tabindex=\"0\" role=\"button\"\u003E\r\n\u003Cdiv class=\"nh ni qj\"\u003E\u003Cpicture\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002Fformat:webp\u002F1*1TQQGby6-h2XcRy6WKVG-Q.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002Fformat:webp\u002F1*1TQQGby6-h2XcRy6WKVG-Q.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002Fformat:webp\u002F1*1TQQGby6-h2XcRy6WKVG-Q.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002Fformat:webp\u002F1*1TQQGby6-h2XcRy6WKVG-Q.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002Fformat:webp\u002F1*1TQQGby6-h2XcRy6WKVG-Q.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002Fformat:webp\u002F1*1TQQGby6-h2XcRy6WKVG-Q.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1400\u002Fformat:webp\u002F1*1TQQGby6-h2XcRy6WKVG-Q.png 1400w\" type=\"image\u002Fwebp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px\" \u002F\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002F1*1TQQGby6-h2XcRy6WKVG-Q.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002F1*1TQQGby6-h2XcRy6WKVG-Q.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002F1*1TQQGby6-h2XcRy6WKVG-Q.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002F1*1TQQGby6-h2XcRy6WKVG-Q.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002F1*1TQQGby6-h2XcRy6WKVG-Q.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002F1*1TQQGby6-h2XcRy6WKVG-Q.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1400\u002F1*1TQQGby6-h2XcRy6WKVG-Q.png 1400w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px\" data-testid=\"og\" \u002F\u003E\u003Cimg class=\"bh er nv c\" role=\"presentation\" src=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:875\u002F1*1TQQGby6-h2XcRy6WKVG-Q.png\" alt=\"\" width=\"700\" height=\"442\" \u002F\u003E\u003C\u002Fpicture\u003E\u003C\u002Fdiv\u003E\r\n\u003C\u002Fdiv\u003E\u003C\u002Ffigure\u003E\r\n\u003Cul class=\"\"\u003E\r\n \t\u003Cli id=\"66c2\" class=\"nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq qb qc qd bk\" data-selectable-paragraph=\"\"\u003EPara a coisa não ficar muito complexa, existem apenas três rotas: uma para criação de usuário, outra para fazer o usuário entrar na aplicação e uma terceira rota protegida (exige autenticação).\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"2d8a\" class=\"nw nx ho ny b nz qe ob oc od qf of og fk qg oi oj fn qh ol om fq qi oo op oq qb qc qd bk\" data-selectable-paragraph=\"\"\u003EVou propor separamos essa aplicação em dois microsserviços distintos, uma para cuidar da parte de criação, cadastro e login dos usuários; e o outra para lidar com os produtos.\u003C\u002Fli\u003E\r\n\u003C\u002Ful\u003E\r\n\u003Cfigure class=\"pt pu pv pw px my nh ni paragraph-image\"\u003E\r\n\u003Cdiv class=\"nr ns ee nt bh nu\" tabindex=\"0\" role=\"button\"\u003E\r\n\u003Cdiv class=\"nh ni qk\"\u003E\u003Cpicture\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002Fformat:webp\u002F1*WSIfVlPjzoM7c0V9IkWegQ.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002Fformat:webp\u002F1*WSIfVlPjzoM7c0V9IkWegQ.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002Fformat:webp\u002F1*WSIfVlPjzoM7c0V9IkWegQ.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002Fformat:webp\u002F1*WSIfVlPjzoM7c0V9IkWegQ.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002Fformat:webp\u002F1*WSIfVlPjzoM7c0V9IkWegQ.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002Fformat:webp\u002F1*WSIfVlPjzoM7c0V9IkWegQ.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1400\u002Fformat:webp\u002F1*WSIfVlPjzoM7c0V9IkWegQ.png 1400w\" type=\"image\u002Fwebp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px\" \u002F\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002F1*WSIfVlPjzoM7c0V9IkWegQ.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002F1*WSIfVlPjzoM7c0V9IkWegQ.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002F1*WSIfVlPjzoM7c0V9IkWegQ.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002F1*WSIfVlPjzoM7c0V9IkWegQ.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002F1*WSIfVlPjzoM7c0V9IkWegQ.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002F1*WSIfVlPjzoM7c0V9IkWegQ.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1400\u002F1*WSIfVlPjzoM7c0V9IkWegQ.png 1400w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px\" data-testid=\"og\" \u002F\u003E\u003Cimg class=\"bh er nv c\" role=\"presentation\" src=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:875\u002F1*WSIfVlPjzoM7c0V9IkWegQ.png\" alt=\"\" width=\"700\" height=\"313\" \u002F\u003E\u003C\u002Fpicture\u003E\u003C\u002Fdiv\u003E\r\n\u003C\u002Fdiv\u003E\u003C\u002Ffigure\u003E\r\n\u003Cul class=\"\"\u003E\r\n \t\u003Cli id=\"c8ab\" class=\"nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq qb qc qd bk\" data-selectable-paragraph=\"\"\u003ENote que em um arquitetura em microsserviços temos uma interface que centralizará todas as requisições e “distribuirá” para os respectivos serviços. Aqui ela está representada pelo app no diagrama. Esta peça é o que chamamos de \u003Cstrong class=\"ny hp\"\u003EGateway\u003C\u002Fstrong\u003E.\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"a283\" class=\"nw nx ho ny b nz qe ob oc od qf of og fk qg oi oj fn qh ol om fq qi oo op oq qb qc qd bk\" data-selectable-paragraph=\"\"\u003ERepare também que nesta organização, cada aplicação tem o seu próprio banco de dados. A ideia é que os serviços sejam independentes, até mesmo nos dados. Mas nada impede que essas aplicações se comuniquem.\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"451a\" class=\"nw nx ho ny b nz qe ob oc od qf of og fk qg oi oj fn qh ol om fq qi oo op oq qb qc qd bk\" data-selectable-paragraph=\"\"\u003EEssa comunicação pode acontecer de várias formas, desde chamadas http (pouco usado) até serviços de mensageria (muito usado). Em nossa aplicação usaremos um serviço externo chamado \u003Ca class=\"ag or\" href=\"https:\u002F\u002Fnats.io\u002F\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003E\u003Cstrong class=\"ny hp\"\u003ENATS\u003C\u002Fstrong\u003E\u003C\u002Fa\u003E que vai nos ajudar com isso.\u003C\u002Fli\u003E\r\n\u003C\u002Ful\u003E\r\n\u003Cp id=\"1ee4\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EPara começar a implementação, faremos 3 projetos em node (farei na mesma pasta pra facilitar):\u003C\u002Fp\u003E\r\n\r\n\u003Cul class=\"\"\u003E\r\n \t\u003Cli id=\"491e\" class=\"nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq qb qc qd bk\" data-selectable-paragraph=\"\"\u003Eapi-gateway: \u003Ccode class=\"cx ql qm qn qo b\"\u003Enpm i moleculer moleculer-web nats\u003C\u002Fcode\u003E\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"81c9\" class=\"nw nx ho ny b nz qe ob oc od qf of og fk qg oi oj fn qh ol om fq qi oo op oq qb qc qd bk\" data-selectable-paragraph=\"\"\u003Eauth-service: \u003Ccode class=\"cx ql qm qn qo b\"\u003Enpm i moleculer moleculer-replt nats uuid\u003C\u002Fcode\u003E\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"e911\" class=\"nw nx ho ny b nz qe ob oc od qf of og fk qg oi oj fn qh ol om fq qi oo op oq qb qc qd bk\" data-selectable-paragraph=\"\"\u003Eproduct-service: \u003Ccode class=\"cx ql qm qn qo b\"\u003Enpm i moleculer moleculer-replt nats\u003C\u002Fcode\u003E\u003C\u002Fli\u003E\r\n\u003C\u002Ful\u003E\r\n\u003Cp id=\"185b\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EVamos começar a construção de cada uma das peças da nossa aplicação.\u003C\u002Fp\u003E\r\n\r\n\u003Cul class=\"\"\u003E\r\n \t\u003Cli id=\"fa2f\" class=\"nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq qb qc qd bk\" data-selectable-paragraph=\"\"\u003E\u003Cstrong\u003EAPI Gateway\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\r\n\u003C\u002Ful\u003E\r\n\u003Cpre\u003E\u003Ccode class=\"line-numbers language-c\"\u003Eimport { ServiceBroker } from \"moleculer\";\r\nimport ApiGatewayService from \"moleculer-web\";\r\n\r\nconst broker = new ServiceBroker({\r\n nodeID: \"gateway-node\",\r\n transporter: \"NATS\",\r\n});\r\n\r\nbroker.createService({\r\n name: \"gateway\",\r\n mixins: [ApiGatewayService],\r\n settings: {\r\n port: 5000,\r\n routes: [\r\n {\r\n path: \"\u002Fauth\",\r\n aliases: {\r\n \"POST \u002Fsign-up\": \"auth.signUp\",\r\n \"POST \u002Fsign-in\": \"auth.signIn\"\r\n }\r\n },\r\n {\r\n path: \"\u002Fapi\",\r\n bodyParsers: {\r\n json: true,\r\n urlencoded: { extended: true }\r\n },\r\n authorization: true,\r\n aliases: {\r\n \"GET \u002Fproducts\": \"product.getProducts\"\r\n }\r\n }\r\n ]\r\n },\r\n methods: {\r\n async authorize(ctx, route, req, res) {\r\n let auth = req.headers[\"authorization\"];\r\n if (auth && auth.startsWith(\"Bearer\")) {\r\n let token = auth.slice(7);\r\n\r\n const user = await ctx.call(\"auth.validateToken\", { token });\r\n if (!user.error) return Promise.resolve(ctx);\r\n\r\n return Promise.reject({ error: \"Token Inválido\" });\r\n\r\n } else {\r\n return Promise.reject({ error: \"Token Inválido\" });\r\n }\r\n }\r\n\r\n }\r\n});\r\n\r\nbroker.start();\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\r\n\u003Cul class=\"\"\u003E\r\n \t\u003Cli id=\"6c57\" class=\"nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq qb qc qd bk\" data-selectable-paragraph=\"\"\u003E\u003Cstrong\u003EAuth Service\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\r\n\u003C\u002Ful\u003E\r\n\u003Cpre\u003E\u003Ccode class=\"line-numbers language-c\"\u003Eimport { ServiceBroker } from \"moleculer\";\r\nimport { v4 as uuidv4 } from 'uuid';\r\n\r\nconst users = [];\r\n\r\nconst broker = new ServiceBroker({\r\n nodeID: \"auth-service-node\",\r\n transporter: \"NATS\"\r\n});\r\n\r\nbroker.createService({\r\n name: \"auth\",\r\n actions: {\r\n signUp(ctx) {\r\n const { username, password } = ctx.params;\r\n users.push({\r\n username,\r\n password\r\n });\r\n\r\n return \"User created.\"\r\n },\r\n\r\n signIn(ctx) {\r\n const { username, password } = ctx.params;\r\n const user = users.find(user => user.username === username);\r\n if (user && user.password === password) {\r\n const token = uuidv4();\r\n user.token = token;\r\n return {\r\n token\r\n }\r\n }\r\n\r\n return { error: \"Invalid credentials\" }\r\n },\r\n\r\n validateToken(ctx) {\r\n const { token } = ctx.params;\r\n const user = users.find(user => user.token === token);\r\n if (!user) return { error: \"Invalid token.\" }\r\n\r\n return user;\r\n }\r\n }\r\n});\r\n\r\nbroker.start().then(() => {\r\n broker.repl();\r\n})\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\r\n\u003Cul class=\"\"\u003E\r\n \t\u003Cli id=\"6bc3\" class=\"nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq qb qc qd bk\" data-selectable-paragraph=\"\"\u003E\u003Cstrong\u003EProducts Service\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\r\n\u003C\u002Ful\u003E\r\n\u003Cpre\u003E\u003Ccode class=\"line-numbers language-c\"\u003Eimport { ServiceBroker } from \"moleculer\";\r\n\r\nconst products = [\r\n { id: 1, name: \"PC da Xuxa\", price: 15000 }\r\n]\r\n\r\nconst broker = new ServiceBroker({\r\n nodeID: \"product-service-node\",\r\n transporter: \"NATS\"\r\n});\r\n\r\nbroker.createService({\r\n name: \"product\",\r\n actions: {\r\n getProducts(ctx) {\r\n return products;\r\n }\r\n }\r\n});\r\n\r\nbroker.start().then(() => {\r\n broker.repl();\r\n})\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\r\n\u003Cul class=\"\"\u003E\r\n \t\u003Cli id=\"3f1e\" class=\"nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq qb qc qd bk\" data-selectable-paragraph=\"\"\u003EPara conseguir fazer os microsserviços conversarem, precisaremos no NATS!\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"abc4\" class=\"nw nx ho ny b nz qe ob oc od qf of og fk qg oi oj fn qh ol om fq qi oo op oq qb qc qd bk\" data-selectable-paragraph=\"\"\u003EA forma mais fácil de trazer ele pro jogo é por meio do Docker:\u003C\u002Fli\u003E\r\n\u003C\u002Ful\u003E\r\n\u003Cpre\u003E\u003Ccode class=\"line-numbers language-c\"\u003Edocker run --name nats -p 4222:4222 nats\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\r\n\u003Cp id=\"7957\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EE pronto! Temos nossa solução em microsserviços! 😄\u003C\u002Fp\u003E\r\n\r\n\u003Ch3 id=\"20d3\" class=\"qx ot ho bf ou fe qy ff fg fh qz fi fj fk ra fl fm fn rb fo fp fq rc fr fs rd bk\"\u003E💻 Repositório\u003C\u002Fh3\u003E\r\n\u003Cp id=\"b6e0\" class=\"pw-post-body-paragraph nw nx ho ny b nz po ob oc od pp of og fk pq oi oj fn pr ol om fq ps oo op oq gp bk\" data-selectable-paragraph=\"\"\u003E\u003Ca class=\"ag or\" href=\"https:\u002F\u002Fgithub.com\u002FProfessor-DiegoPinho\u002Fnode-microservice-moleculer\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003Ehttps:\u002F\u002Fgithub.com\u002FProfessor-DiegoPinho\u002Fnode-microservice-moleculer\u003C\u002Fa\u003E\u003C\u002Fp\u003E\r\n\r\n\u003Ch3 id=\"812d\" class=\"qx ot ho bf ou fe qy ff fg fh qz fi fj fk ra fl fm fn rb fo fp fq rc fr fs rd bk\"\u003E🌐 Referências e outros materiais\u003C\u002Fh3\u003E\r\n\u003Cul class=\"\"\u003E\r\n \t\u003Cli id=\"2a97\" class=\"nw nx ho ny b nz po ob oc od pp of og fk pq oi oj fn pr ol om fq ps oo op oq qb qc qd bk\" data-selectable-paragraph=\"\"\u003E🌐 \u003Ca class=\"ag or\" href=\"https:\u002F\u002Fmoleculer.services\u002Findex.html\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003EMoleculer — Progressive microservices framework for Node.js\u003C\u002Fa\u003E\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"439b\" class=\"nw nx ho ny b nz qe ob oc od qf of og fk qg oi oj fn qh ol om fq qi oo op oq qb qc qd bk\" data-selectable-paragraph=\"\"\u003E🌐 \u003Ca class=\"ag or\" href=\"https:\u002F\u002Fnats.io\u002F\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003ENATS.io — Cloud Native, Open Source, High-performance Messaging\u003C\u002Fa\u003E\u003C\u002Fli\u003E\r\n\u003C\u002Ful\u003E\r\n\u003Ch3 id=\"0bf8\" class=\"os ot ho bf ou ov ow ox fg oy oz pa fj pb pc pd pe pf pg ph pi pj pk pl pm pn bk\"\u003EVersão em vídeo\u003C\u002Fh3\u003E\r\n\u003Cp id=\"fa19\" class=\"pw-post-body-paragraph nw nx ho ny b nz po ob oc od pp of og fk pq oi oj fn pr ol om fq ps oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EConfira a versão em vídeo desse artigo!\u003C\u002Fp\u003E\r\n\r\n\u003Cfigure class=\"pt pu pv pw px my\"\u003E\r\n\u003Cdiv class=\"py es m ee\"\u003E\r\n\u003Cdiv class=\"pz qa m\"\u003E\u003Ciframe class=\"eo o he dz bh\" title=\"Microsserviços em Node com o Moleculer.js\" src=\"https:\u002F\u002Fcdn.embedly.com\u002Fwidgets\u002Fmedia.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FLT9_51k-gxM%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DLT9_51k-gxM&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FLT9_51k-gxM%2Fhqdefault.jpg&key=a19fcc184b9711e1b4764040d3dc5c07&type=text%2Fhtml&schema=youtube\" width=\"854\" height=\"480\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\" data-mce-fragment=\"1\"\u003E\u003C\u002Fiframe\u003E\u003C\u002Fdiv\u003E\r\n\u003C\u002Fdiv\u003E\u003C\u002Ffigure\u003E\r\n\u003Cp id=\"e663\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003E—\u003C\u002Fp\u003E\r\n\r\n\u003Ch1 id=\"5fed\" class=\"os ot ho bf ou ov ow ox fg oy oz pa fj pb pc pd pe pf pg ph pi pj pk pl pm pn bk\" data-selectable-paragraph=\"\"\u003E\u003C\u002Fh1\u003E","excerpt":"\u003Cp\u003EMontar um projeto na arquitetura de Microsserviços … ecossistema Node? Como tudo na tecnologia, há várias formas diferentes; no… framework Moleculer.\u003C\u002Fp\u003E\n","link":"https:\u002F\u002Fimasters.com.br\u002Fjavascript\u002Farquitetura-de-microsservicos-em-node-com-o-moleculerjs","date":"23 jun, 2025","thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2025\u002F06\u002F26181751\u002FMicrosservi%C3%A7os.jpg","externalMention":"","author":{"id":"144418","thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2018\u002F05\u002F30171243\u002Fdiego-pinho.jpg","name":"Diego Pinho","description":"Bacharel em Ciência da Computação pela PUCSP e MBA em Gestão da Tecnologia da Informação na FIAP. Autor do livro ECMAScript 6 - Entre de cabeça no futuro do JavaScript. Cofundador da Code Prestige e Community Manager no iMasters.","slug":"diegopinho","url":"https:\u002F\u002Fimasters.com.br\u002Fperfil\u002Fdiegopinho","registered":"2013-08-13 18:00:53","social":{"linkedin":null,"youtube":null,"facebook":"","twitter":"https:\u002F\u002Ftwitter.com\u002FDiegoPinho","instagram":null,"github":null,"url":"http:\u002F\u002Fwww.diegopinho.com.br","mail":"diego.pinho@imasters.com.br"},"articles_count":113,"views_count":1276900,"certifications":null,"conquests":null,"office":null},"categories":[{"title":"JavaScript","slug":"javascript","id":7220,"link":"https:\u002F\u002Fimasters.com.br\u002Fjavascript"}],"tags":[{"title":"javascript","slug":"javascript-2","id":214,"link":"https:\u002F\u002Fimasters.com.br\u002Fjavascript-2"},{"title":"microservices","slug":"microservices","id":4156,"link":"https:\u002F\u002Fimasters.com.br\u002Fmicroservices"},{"title":"microserviços","slug":"microservicos","id":5632,"link":"https:\u002F\u002Fimasters.com.br\u002Fmicroservicos"},{"title":"MoleculerJS","slug":"moleculerjs","id":9240,"link":"https:\u002F\u002Fimasters.com.br\u002Fmoleculerjs"},{"title":"node","slug":"node","id":236,"link":"https:\u002F\u002Fimasters.com.br\u002Fnode"},{"title":"web","slug":"web","id":327,"link":"https:\u002F\u002Fimasters.com.br\u002Fweb"}],"relateds":[],"seo":[],"type":"post"},{"id":163608,"title":"Dica de ouro: Saiba como fazer uma navbar responsiva","content":"\u003Cp id=\"7c4b\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EHoje é praticamente impossível ter um site que não seja responsivo.\u003C\u002Fp\u003E\r\n\u003Cp id=\"2d82\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EExistem várias formas criativas e técnicas de lidar com responsividade (ex: Flexbox, Media Queries, CSS Grid, etc.) nos mais diferentes contextos, mas há algumas adaptações que são praticamente padrões em todos os projetos.\u003C\u002Fp\u003E\r\n\u003Cp id=\"27d9\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EUm claro exemplo é a navbar responsiva. Quando ela possui muitos itens, inevitavelmente se torna imprópria para o ambiente mobile, pois os itens literalmente não cabem no espaço disponível.\u003C\u002Fp\u003E\r\n\u003Cp id=\"1f21\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003ENessas situações, precisamos pensar em técnicas criativas. Hoje vamos aprender como fazer uma navbar responsiva minimalista e elegante usando apenas o básico HTML, CSS e um pouquinho de nada de JavaScript.\u003C\u002Fp\u003E\r\n\u003Cp id=\"53d7\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EPara aprendemos como fazer isso, tomaremos como exemplo a solução que apliquei no meu próprio site pessoal. Sou suspeito pra falar, mas acho que ela atendeu bem ao seu objetivo 😄\u003C\u002Fp\u003E\r\n\r\n\u003Cfigure class=\"os ot ou ov ow my nh ni paragraph-image\"\u003E\r\n\u003Cdiv class=\"nr ns ee nt bh nu\" tabindex=\"0\" role=\"button\"\u003E\r\n\u003Cdiv class=\"nh ni or\"\u003E\r\n\r\n\u003Cpicture\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002Fformat:webp\u002F1*Gzqr6rb7ZM4yV7ZmdQnghg.gif 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002Fformat:webp\u002F1*Gzqr6rb7ZM4yV7ZmdQnghg.gif 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002Fformat:webp\u002F1*Gzqr6rb7ZM4yV7ZmdQnghg.gif 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002Fformat:webp\u002F1*Gzqr6rb7ZM4yV7ZmdQnghg.gif 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002Fformat:webp\u002F1*Gzqr6rb7ZM4yV7ZmdQnghg.gif 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002Fformat:webp\u002F1*Gzqr6rb7ZM4yV7ZmdQnghg.gif 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1400\u002Fformat:webp\u002F1*Gzqr6rb7ZM4yV7ZmdQnghg.gif 1400w\" type=\"image\u002Fwebp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px\" \u002F\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002F1*Gzqr6rb7ZM4yV7ZmdQnghg.gif 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002F1*Gzqr6rb7ZM4yV7ZmdQnghg.gif 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002F1*Gzqr6rb7ZM4yV7ZmdQnghg.gif 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002F1*Gzqr6rb7ZM4yV7ZmdQnghg.gif 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002F1*Gzqr6rb7ZM4yV7ZmdQnghg.gif 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002F1*Gzqr6rb7ZM4yV7ZmdQnghg.gif 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1400\u002F1*Gzqr6rb7ZM4yV7ZmdQnghg.gif 1400w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px\" data-testid=\"og\" \u002F\u003E\u003C\u002Fpicture\u003E\r\n\r\n[caption id=\"\" align=\"alignnone\" width=\"700\"]\u003Cimg class=\"bh er nv c\" role=\"presentation\" src=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:875\u002F1*Gzqr6rb7ZM4yV7ZmdQnghg.gif\" alt=\"\" width=\"700\" height=\"405\" \u002F\u003E funcionamento da navbar responsiva[\u002Fcaption]\r\n\r\n\u003C\u002Fdiv\u003E\r\n\u003C\u002Fdiv\u003E\u003C\u002Ffigure\u003E\r\n\u003Cp id=\"f015\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EVamos começar criando a estrutura básica do site para desktop. Neste caso, precisamos essencialmente de três elementos HTML: uma tag <nav> para a barra de navegação, uma tag <img> para o logotipo e tags <ul> e <li> para a lista de links:\u003C\u002Fp\u003E\r\n\r\n\u003Cpre\u003E\u003Ccode class=\"line-numbers language-html\"\u003E<!DOCTYPE html>\r\n<html lang=\"pt-br\">\r\n\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Menu Responsivo<\u002Ftitle>\r\n <link rel=\"stylesheet\" href=\"style.css\">\r\n<\u002Fhead>\r\n\r\n<body>\r\n <nav class=\"navbar\">\r\n <img src=\"logo.png\" alt=\"logo\">\r\n <div class=\"navbar-links\">\r\n <ul>\r\n <li><a href=\"#\">Home<\u002Fa><\u002Fli>\r\n <li><a href=\"#\">Sobre<\u002Fa><\u002Fli>\r\n <li><a href=\"#\">Contato<\u002Fa><\u002Fli>\r\n <\u002Ful>\r\n <\u002Fdiv>\r\n <\u002Fnav>\r\n<\u002Fbody>\r\n\r\n<\u002Fhtml>\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\r\nVamos aplicar o CSS básico para que ele funcione bem no desktop:\r\n\u003Cpre\u003E\u003Ccode class=\"line-numbers language-css\"\u003E@import url('https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');\r\n\r\n* {\r\n box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n font-family: \"Poppins\", sans-serif;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.navbar {\r\n display: flex;\r\n position: relative;\r\n justify-content: space-around;\r\n align-items: center;\r\n border-bottom-color: rgb(234, 236, 243);\r\n border-bottom-style: solid;\r\n border-bottom-width: 1px;\r\n}\r\n\r\n.navbar img {\r\n width: 220px;\r\n}\r\n\r\n.navbar-links {\r\n height: 100%;\r\n}\r\n\r\n.navbar-links ul {\r\n display: flex;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.navbar-links li {\r\n list-style: none;\r\n}\r\n\r\n.navbar-links li a {\r\n display: block;\r\n text-decoration: none;\r\n padding: 1rem;\r\n color: #333;\r\n font-weight: 500;\r\n}\r\n\r\n.navbar-links li:hover {\r\n background-color: #DBDBDB;\r\n}\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\r\n\u003Cul class=\"\"\u003E\r\n \t\u003Cli id=\"4485\" class=\"nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq pm pn po bk\" data-selectable-paragraph=\"\"\u003EAqui surge nosso primeiro problema: à medida que a tela fica menor, nossa navbar começa a transbordar horizontalmente. Esse comportamento não é desejável. Portanto, precisamos implementar o menu “hambúrguer”.\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"9f60\" class=\"nw nx ho ny b nz pp ob oc od pq of og fk pr oi oj fn ps ol om fq pt oo op oq pm pn po bk\" data-selectable-paragraph=\"\"\u003EO primeiro passo para isso é adicionar no HTML o botão que corresponderá ao menu e as opções que ele oferecerá. Há diferentes maneiras de criamos esse botão, por ora, faremos ela na “mão”:\u003C\u002Fli\u003E\r\n\u003C\u002Ful\u003E\r\n\u003Cpre\u003E\u003Ccode class=\"line-numbers language-html\"\u003E<!DOCTYPE html>\r\n<html lang=\"pt-br\">\r\n\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Menu Responsivo<\u002Ftitle>\r\n <link rel=\"stylesheet\" href=\"style.css\">\r\n<\u002Fhead>\r\n\r\n<body>\r\n <nav class=\"navbar\">\r\n <img src=\"logo.png\" alt=\"logo\">\r\n <a href=\"#\" class=\"toggle-button\">\r\n <span class=\"bar\"><\u002Fspan>\r\n <span class=\"bar\"><\u002Fspan>\r\n <span class=\"bar\"><\u002Fspan>\r\n <\u002Fa>\r\n <div class=\"navbar-links\">\r\n <ul>\r\n <li><a href=\"#\">Home<\u002Fa><\u002Fli>\r\n <li><a href=\"#\">Sobre<\u002Fa><\u002Fli>\r\n <li><a href=\"#\">Contato<\u002Fa><\u002Fli>\r\n <\u002Ful>\r\n <\u002Fdiv>\r\n <\u002Fnav>\r\n\r\n <script src=\"script.js\"><\u002Fscript>\r\n<\u002Fbody>\r\n\r\n<\u002Fhtml>\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\r\nAgora vamos adicionar o CSS que vai construí-lo adequadamente na tela:\r\n\u003Cpre\u003E\u003Ccode class=\"line-numbers language-css\"\u003E.toggle-button {\r\n position: absolute;\r\n top: .75rem;\r\n right: 1rem;\r\n display: none;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n width: 30px;\r\n height: 21px;\r\n}\r\n\r\n.toggle-button .bar {\r\n height: 3px;\r\n width: 100%;\r\n background-color: #333;\r\n border-radius: 10px;\r\n}\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\r\n\u003Cul class=\"\"\u003E\r\n \t\u003Cli id=\"c2d6\" class=\"nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq pm pn po bk\" data-selectable-paragraph=\"\"\u003EAgora temos que ajustar para que ele apareça somente quando o dispositivo tiver a tela pequena. Para isso, precisaremos das Media Queries.\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"7579\" class=\"nw nx ho ny b nz pp ob oc od pq of og fk pr oi oj fn ps ol om fq pt oo op oq pm pn po bk\" data-selectable-paragraph=\"\"\u003EAs media queries funcionam como condicionais dentro do nosso código CSS. Desta forma, conseguimos trabalhar com condições para que um elemento apareça ou não. Vamos ver como fica nosso exemplo:\u003C\u002Fli\u003E\r\n\u003C\u002Ful\u003E\r\n\u003Cpre\u003E\u003Ccode class=\"line-numbers language-css\"\u003E@media (max-width: 800px) {\r\n .navbar {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n .toggle-button {\r\n display: flex;\r\n }\r\n\r\n .navbar-links {\r\n display: none;\r\n width: 100%;\r\n }\r\n\r\n .navbar-links ul {\r\n width: 100%;\r\n flex-direction: column;\r\n }\r\n\r\n .navbar-links ul li {\r\n text-align: center;\r\n }\r\n\r\n .navbar-links ul li a {\r\n padding: .5rem 1rem;\r\n }\r\n\r\n}\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\r\nAgora temos mais um problema para resolver. Ao clicar no menu, queremos que os itens apareçam e quando clicarmos novamente, que eles sumam. É neste momento que precisaremos da ajuda do JavaScript!\r\n\u003Cpre\u003E\u003Ccode class=\"line-numbers language-javascript\"\u003Econst toggleButton = document.getElementsByClassName(\"toggle-button\")[0];\r\nconst navbarLinks = document.getElementsByClassName(\"navbar-links\")[0];\r\n\r\ntoggleButton.addEventListener(\"click\", () => {\r\n navbarLinks.classList.toggle(\"active\");\r\n});\r\n\r\n.navbar-links.active {\r\n display: flex;\r\n}\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\r\n\u003Cp id=\"f2c6\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EE pronto! Temos nossa navbar responsiva lindona! Basta adaptar os textos, opções, tamanhos e afins para melhor se adequar ao seu projeto! 😀\u003C\u002Fp\u003E\r\n\u003Cp id=\"03d4\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003E—\u003C\u002Fp\u003E\r\n\r\n\u003Ch3 id=\"afc0\" class=\"pu ph ho bf pv pw px py fg pz qa qb fj qc qd qe qf qg qh qi qj qk ql qm qn qo bk\"\u003ERepositório\u003C\u002Fh3\u003E\r\n\u003Cp id=\"1648\" class=\"pw-post-body-paragraph nw nx ho ny b nz qp ob oc od qq of og fk qr oi oj fn qs ol om fq qt oo op oq gp bk\" data-selectable-paragraph=\"\"\u003E\u003Ca class=\"ag qu\" href=\"https:\u002F\u002Fgithub.com\u002FProfessor-DiegoPinho\u002Fmenu-responsivo\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003Ehttps:\u002F\u002Fgithub.com\u002FProfessor-DiegoPinho\u002Fmenu-responsivo\u003C\u002Fa\u003E\u003C\u002Fp\u003E\r\n\r\n\u003Ch3 id=\"f388\" class=\"pu ph ho bf pv pw px py fg pz qa qb fj qc qd qe qf qg qh qi qj qk ql qm qn qo bk\"\u003EAgradecimentos\u003C\u002Fh3\u003E\r\n\u003Cp id=\"932d\" class=\"pw-post-body-paragraph nw nx ho ny b nz qp ob oc od qq of og fk qr oi oj fn qs ol om fq qt oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EGostou deste conteúdo? Então curta e compartilhe! 👏\u003C\u002Fp\u003E","excerpt":"\u003Cp\u003EExistem várias formas criativas e técnicas de lidar com responsividade (ex: Flexbox, Media Queries, CSS Grid)… Um claro exemplo é a navbar responsiva.\u003C\u002Fp\u003E\n","link":"https:\u002F\u002Fimasters.com.br\u002Fdesenvolvimento\u002Fcomo-fazer-uma-navbar-responsiva","date":"11 jun, 2025","thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2025\u002F06\u002F26163321\u002FDesenvolvimento.jpg","externalMention":"","author":{"id":"144418","thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2018\u002F05\u002F30171243\u002Fdiego-pinho.jpg","name":"Diego Pinho","description":"Bacharel em Ciência da Computação pela PUCSP e MBA em Gestão da Tecnologia da Informação na FIAP. Autor do livro ECMAScript 6 - Entre de cabeça no futuro do JavaScript. Cofundador da Code Prestige e Community Manager no iMasters.","slug":"diegopinho","url":"https:\u002F\u002Fimasters.com.br\u002Fperfil\u002Fdiegopinho","registered":"2013-08-13 18:00:53","social":{"linkedin":null,"youtube":null,"facebook":"","twitter":"https:\u002F\u002Ftwitter.com\u002FDiegoPinho","instagram":null,"github":null,"url":"http:\u002F\u002Fwww.diegopinho.com.br","mail":"diego.pinho@imasters.com.br"},"articles_count":113,"views_count":1276900,"certifications":null,"conquests":null,"office":null},"categories":[{"title":"Desenvolvimento","slug":"desenvolvimento","id":7234,"link":"https:\u002F\u002Fimasters.com.br\u002Fdesenvolvimento"}],"tags":[{"title":"CSS","slug":"css","id":4250,"link":"https:\u002F\u002Fimasters.com.br\u002Fcss"},{"title":"desenvolvimento","slug":"desenvolvimento-2","id":186,"link":"https:\u002F\u002Fimasters.com.br\u002Fdesenvolvimento-2"},{"title":"desenvolvimento web","slug":"desenvolvimento-web","id":5269,"link":"https:\u002F\u002Fimasters.com.br\u002Fdesenvolvimento-web"},{"title":"html","slug":"html-2","id":405,"link":"https:\u002F\u002Fimasters.com.br\u002Fhtml-2"},{"title":"javascript","slug":"javascript-2","id":214,"link":"https:\u002F\u002Fimasters.com.br\u002Fjavascript-2"}],"relateds":[],"seo":[],"type":"post"},{"id":163600,"title":"Elementos Fantasmas: O truque de UX para carregamentos mais rápidos!","content":"\u003Cp id=\"a3ff\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003ENão tem nada pior para a experiência do usuário do que acessar um site e ter a tela vazia por vários segundos porque o conteúdo está sendo carregado.\u003C\u002Fp\u003E\r\n\u003Cp id=\"3013\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EÉ claro que há muitas situações em que mesmo com os nossos melhores esforços, o site vai demorar pra carregar. É o caso, por exemplo, de conexões rápidas.\u003C\u002Fp\u003E\r\n\u003Cp id=\"c8a2\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003E\u003Cstrong class=\"ny hp\"\u003EO que fazer para nosso o usuário ter uma percepção de que o site está mais rápido mesmo para situações de lentidão?\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\r\n\u003Cp id=\"9fcb\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EÉ nestas situações que usamos o elementos fantasmas! (bu!) 👻\u003C\u002Fp\u003E\r\n\u003Cp id=\"af33\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003ENeste artigo te explico passo a passo como você também pode implementar no seu site! É mais fácil do que parece :)\u003C\u002Fp\u003E\r\n\r\n\u003Ch2\u003EElementos Fantasmas\u003C\u002Fh2\u003E\r\n\u003Cp id=\"d5a7\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EOs elementos fantasmas nada mais são do que alguns placeholders com animação que substituem o verdadeiro conteúdo do site enquanto ele ainda não carregou.\u003C\u002Fp\u003E\r\n\u003Cp id=\"282a\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EVocê já deve ter visto isso inúmeras vezes nas redes sociais, por exemplo:\u003C\u002Fp\u003E\r\n\r\n\u003Cfigure class=\"ps pt pu pv pw my nh ni paragraph-image\"\u003E\r\n\u003Cdiv class=\"nh ni qf\"\u003E\r\n\r\n\u003Cpicture\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002Fformat:webp\u002F0*X0SQ_nprcmbKt6Ad.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002Fformat:webp\u002F0*X0SQ_nprcmbKt6Ad.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002Fformat:webp\u002F0*X0SQ_nprcmbKt6Ad.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002Fformat:webp\u002F0*X0SQ_nprcmbKt6Ad.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002Fformat:webp\u002F0*X0SQ_nprcmbKt6Ad.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002Fformat:webp\u002F0*X0SQ_nprcmbKt6Ad.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1400\u002Fformat:webp\u002F0*X0SQ_nprcmbKt6Ad.png 1400w\" type=\"image\u002Fwebp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px\" \u002F\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002F0*X0SQ_nprcmbKt6Ad.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002F0*X0SQ_nprcmbKt6Ad.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002F0*X0SQ_nprcmbKt6Ad.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002F0*X0SQ_nprcmbKt6Ad.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002F0*X0SQ_nprcmbKt6Ad.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002F0*X0SQ_nprcmbKt6Ad.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1400\u002F0*X0SQ_nprcmbKt6Ad.png 1400w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px\" data-testid=\"og\" \u002F\u003E\u003C\u002Fpicture\u003E\r\n\r\n[caption id=\"\" align=\"alignnone\" width=\"700\"]\u003Cimg class=\"bh er nv c\" role=\"presentation\" src=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:875\u002F0*X0SQ_nprcmbKt6Ad.png\" alt=\"\" width=\"700\" height=\"335\" \u002F\u003E Elementos fantasmas no LinkedIn[\u002Fcaption]\r\n\r\n\u003C\u002Fdiv\u003E\u003C\u002Ffigure\u003E\r\n\u003Cp id=\"4deb\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EEssas estratégia é muito boa porque dá percepção pro seu usuário de que o site já está carregando uma série de informações, diferente do que acontece quando não mostramos nada ou simplesmente mostramos uma rodinha de loading. Cria uma percepção de carregamento mais rápido.\u003C\u002Fp\u003E\r\n\u003Cp id=\"a101\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EFelizmente o processo para criarmos este efeito é relativamente simples. Primeiramente, precisamos entender como é o nosso conteúdo carregado. Neste exemplo, farei este post aqui:\u003C\u002Fp\u003E\r\n\u003Cp id=\"3e6f\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EO código que corresponde a este post é este:\u003C\u002Fp\u003E\r\n\r\n\u003Cpre\u003E\u003Ccode class=\"line-numbers language-html\"\u003E<!DOCTYPE html>\r\n<html lang=\"pt-br\">\r\n\r\n<head>\r\n <meta charset=\"UTF-8\" \u002F>\r\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \u002F>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \u002F>\r\n <link rel=\"stylesheet\" href=\"styles.css\" \u002F>\r\n <title>Ghost Elements<\u002Ftitle>\r\n<\u002Fhead>\r\n\r\n<body>\r\n <div class=\"container\">\r\n <template id=\"card-template\">\r\n <a class=\"card\" id=\"card-link\" target=\"_blank\">\r\n \r\n <div class=\"card-header\">\r\n <div>\r\n <img class=\"header-img\" id=\"logo-img\" alt=\"\" \u002F>\r\n <\u002Fdiv>\r\n <h3 class=\"card-header header-title\" id=\"card-title\">\r\n <\u002Fh3>\r\n <\u002Fdiv>\r\n\r\n \r\n <div class=\"card-body\">\r\n <div class=\"card-body body-text\" id=\"card-details\">\r\n <\u002Fdiv>\r\n\r\n <div class=\"card-body body-img\">\r\n <img alt=\"\" id=\"cover-img\" \u002F>\r\n <\u002Fdiv>\r\n <\u002Fdiv>\r\n <\u002Fa>\r\n <\u002Ftemplate>\r\n <\u002Fdiv>\r\n\r\n <script src=\"script.js\"><\u002Fscript>\r\n<\u002Fbody>\r\n\r\n<\u002Fhtml>\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\r\nComo desejamos este conteúdo dinamicamente, vamos codar o nosso JavaScript:\r\n\u003Cpre\u003E\u003Ccode class=\"line-numbers language-javascript\"\u003Edocument.addEventListener('DOMContentLoaded', () => {\r\n const QTD_POSTS = 1;\r\n const container = document.querySelector(\".container\");\r\n const cardTemplate = document.querySelector(\"#card-template\");\r\n for (let i = 0; i < QTD_POSTS; i++) {\r\n container.append(cardTemplate.content.cloneNode(true));\r\n }\r\n\r\n fetch(\"data.json\")\r\n .then((response) => response.json())\r\n .then((posts) => {\r\n container.innerHTML = \"\";\r\n posts.forEach((post) => {\r\n const { title, details, coverImage, logoImage, link } = post;\r\n\r\n const div = cardTemplate.content.cloneNode(true);\r\n div.querySelector(\"#card-link\").href = link;\r\n div.querySelector(\"#logo-img\").src = logoImage;\r\n div.querySelector(\"#card-title\").textContent = title;\r\n div.querySelector(\"#card-details\").textContent = details;\r\n div.querySelector(\"#cover-img\").src = coverImage;\r\n container.append(div);\r\n });\r\n });\r\n})\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\r\n\u003Cp id=\"2ee2\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003ESe rodarmos o site localmente do jeito como está, é quase imperceptível o tempo de carregamento. Para ter uma melhor ideia da experiência do usuário, precisamos usar acessar a aba de Network e alterar o tipo de conexão. Usarei 3G.\u003C\u002Fp\u003E\r\n\r\n\u003Cfigure class=\"ps pt pu pv pw my nh ni paragraph-image\"\u003E\r\n\u003Cdiv class=\"nr ns ee nt bh nu\" tabindex=\"0\" role=\"button\"\u003E\r\n\u003Cdiv class=\"nh ni qq\"\u003E\u003Cpicture\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002Fformat:webp\u002F1*k13Yd55r91zAIcZaMGoAKw.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002Fformat:webp\u002F1*k13Yd55r91zAIcZaMGoAKw.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002Fformat:webp\u002F1*k13Yd55r91zAIcZaMGoAKw.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002Fformat:webp\u002F1*k13Yd55r91zAIcZaMGoAKw.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002Fformat:webp\u002F1*k13Yd55r91zAIcZaMGoAKw.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002Fformat:webp\u002F1*k13Yd55r91zAIcZaMGoAKw.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1400\u002Fformat:webp\u002F1*k13Yd55r91zAIcZaMGoAKw.png 1400w\" type=\"image\u002Fwebp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px\" \u002F\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002F1*k13Yd55r91zAIcZaMGoAKw.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002F1*k13Yd55r91zAIcZaMGoAKw.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002F1*k13Yd55r91zAIcZaMGoAKw.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002F1*k13Yd55r91zAIcZaMGoAKw.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002F1*k13Yd55r91zAIcZaMGoAKw.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002F1*k13Yd55r91zAIcZaMGoAKw.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1400\u002F1*k13Yd55r91zAIcZaMGoAKw.png 1400w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px\" data-testid=\"og\" \u002F\u003E\u003Cimg class=\"bh er nv c\" role=\"presentation\" src=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:875\u002F1*k13Yd55r91zAIcZaMGoAKw.png\" alt=\"\" width=\"700\" height=\"404\" \u002F\u003E\u003C\u002Fpicture\u003E\u003C\u002Fdiv\u003E\r\n\u003C\u002Fdiv\u003E\u003C\u002Ffigure\u003E\r\n\u003Cp id=\"067f\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EA experiência atual é meio esquisita. Temos uma caixa vazia por um tempo e do nada o elemento do site é carregado. Não está bom assim. Vamos adicionar alguns elementos fantasmas para melhorar essa experiência.\u003C\u002Fp\u003E\r\n\u003Cp id=\"7201\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EVamos começar pensar nos elementos fantasmas que desejamos inserir com base no resultado final que teremos. Para este post, eu identifiquei quatro fantasminhas:\u003C\u002Fp\u003E\r\n\r\n\u003Cfigure class=\"ps pt pu pv pw my nh ni paragraph-image\"\u003E\r\n\u003Cdiv class=\"nr ns ee nt bh nu\" tabindex=\"0\" role=\"button\"\u003E\r\n\u003Cdiv class=\"nh ni qr\"\u003E\r\n\r\n\u003Cpicture\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002Fformat:webp\u002F1*9-tS0RGtjI8wswnQ_rLs0A.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002Fformat:webp\u002F1*9-tS0RGtjI8wswnQ_rLs0A.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002Fformat:webp\u002F1*9-tS0RGtjI8wswnQ_rLs0A.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002Fformat:webp\u002F1*9-tS0RGtjI8wswnQ_rLs0A.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002Fformat:webp\u002F1*9-tS0RGtjI8wswnQ_rLs0A.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002Fformat:webp\u002F1*9-tS0RGtjI8wswnQ_rLs0A.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1400\u002Fformat:webp\u002F1*9-tS0RGtjI8wswnQ_rLs0A.png 1400w\" type=\"image\u002Fwebp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px\" \u002F\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002F1*9-tS0RGtjI8wswnQ_rLs0A.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002F1*9-tS0RGtjI8wswnQ_rLs0A.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002F1*9-tS0RGtjI8wswnQ_rLs0A.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002F1*9-tS0RGtjI8wswnQ_rLs0A.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002F1*9-tS0RGtjI8wswnQ_rLs0A.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002F1*9-tS0RGtjI8wswnQ_rLs0A.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1400\u002F1*9-tS0RGtjI8wswnQ_rLs0A.png 1400w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px\" data-testid=\"og\" \u002F\u003E\u003C\u002Fpicture\u003E\r\n\r\n[caption id=\"\" align=\"alignnone\" width=\"700\"]\u003Cimg class=\"bh er nv c\" role=\"presentation\" src=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:875\u002F1*9-tS0RGtjI8wswnQ_rLs0A.png\" alt=\"\" width=\"700\" height=\"388\" \u002F\u003E Elementos fantasmas que substituem os elementos reais[\u002Fcaption]\r\n\r\n\u003C\u002Fdiv\u003E\r\n\u003C\u002Fdiv\u003E\u003C\u002Ffigure\u003E\r\n\u003Cp id=\"acd4\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EDentro do nosso HTML, vamos adicionar alguns destes elementos:\u003C\u002Fp\u003E\r\n\r\n\u003Cpre\u003E\u003Ccode class=\"line-numbers language-html\"\u003E<!DOCTYPE html>\r\n<html lang=\"pt-br\">\r\n\r\n<head>\r\n <meta charset=\"UTF-8\" \u002F>\r\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \u002F>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \u002F>\r\n <link rel=\"stylesheet\" href=\"styles.css\" \u002F>\r\n <title>Ghost Elements<\u002Ftitle>\r\n<\u002Fhead>\r\n\r\n<body>\r\n <div class=\"container\">\r\n <template id=\"card-template\">\r\n <a class=\"card\" id=\"card-link\" target=\"_blank\">\r\n \r\n <div class=\"card-header\">\r\n <div>\r\n <img class=\"header-img ghost\" id=\"logo-img\" alt=\"\" \u002F>\r\n <\u002Fdiv>\r\n <h3 class=\"card-header header-title\" id=\"card-title\">\r\n <div class=\"ghost ghost-text\"><\u002Fdiv>\r\n <div class=\"ghost ghost-text\"><\u002Fdiv>\r\n <\u002Fh3>\r\n <\u002Fdiv>\r\n\r\n \r\n <div class=\"card-body\">\r\n <div class=\"card-body body-text\" id=\"card-details\">\r\n <div class=\"ghost ghost-text ghost-text-body\"><\u002Fdiv>\r\n <\u002Fdiv>\r\n\r\n <div class=\"card-body body-img\">\r\n <img class=\"ghost\" alt=\"\" id=\"cover-img\" \u002F>\r\n <\u002Fdiv>\r\n <\u002Fdiv>\r\n <\u002Fa>\r\n <\u002Ftemplate>\r\n <\u002Fdiv>\r\n\r\n <script src=\"script.js\"><\u002Fscript>\r\n<\u002Fbody>\r\n\r\n<\u002Fhtml>\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\r\n\u003Cp id=\"da7c\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003ERepare em todos os lugares em que adicionar as classes \u003Cstrong class=\"ny hp\"\u003Eghost\u003C\u002Fstrong\u003E.\u003C\u002Fp\u003E\r\n\u003Cp id=\"51bd\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EVamos partir para o CSS:\u003C\u002Fp\u003E\r\n\r\n\u003Cpre\u003E\u003Ccode class=\"line-numbers language-css\"\u003E.ghost {\r\n animation: ghost-loading 1s linear infinite alternate;\r\n}\r\n\r\n@keyframes ghost-loading {\r\n 0% {\r\n background-color: #c2cfd6;\r\n }\r\n\r\n 100% {\r\n background-color: #f0f3f5;\r\n }\r\n}\r\n\r\n.ghost-text {\r\n width: 100%;\r\n height: 0.7rem;\r\n margin-bottom: 0.5rem;\r\n border-radius: 0.25rem;\r\n}\r\n\r\n.ghost-text-body {\r\n width: 75%;\r\n}\r\n\r\nimg[alt] {\r\n text-indent: -10000px;\r\n}\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\r\n\u003Cp id=\"67fd\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EAo rodar o site em uma conexão lenta, agora teremos outra experiência:\u003C\u002Fp\u003E\r\n\r\n\u003Cfigure class=\"ps pt pu pv pw my nh ni paragraph-image\"\u003E\r\n\u003Cdiv class=\"nh ni qs\"\u003E\r\n\r\n\u003Cpicture\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002Fformat:webp\u002F1*yKi0UJo4FootqNb1nWP7Lg.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002Fformat:webp\u002F1*yKi0UJo4FootqNb1nWP7Lg.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002Fformat:webp\u002F1*yKi0UJo4FootqNb1nWP7Lg.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002Fformat:webp\u002F1*yKi0UJo4FootqNb1nWP7Lg.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002Fformat:webp\u002F1*yKi0UJo4FootqNb1nWP7Lg.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002Fformat:webp\u002F1*yKi0UJo4FootqNb1nWP7Lg.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1292\u002Fformat:webp\u002F1*yKi0UJo4FootqNb1nWP7Lg.png 1292w\" type=\"image\u002Fwebp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 646px\" \u002F\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002F1*yKi0UJo4FootqNb1nWP7Lg.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002F1*yKi0UJo4FootqNb1nWP7Lg.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002F1*yKi0UJo4FootqNb1nWP7Lg.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002F1*yKi0UJo4FootqNb1nWP7Lg.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002F1*yKi0UJo4FootqNb1nWP7Lg.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002F1*yKi0UJo4FootqNb1nWP7Lg.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1292\u002F1*yKi0UJo4FootqNb1nWP7Lg.png 1292w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 646px\" data-testid=\"og\" \u002F\u003E\u003C\u002Fpicture\u003E\r\n\r\n[caption id=\"\" align=\"alignnone\" width=\"646\"]\u003Cimg class=\"bh er nv c\" role=\"presentation\" src=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:808\u002F1*yKi0UJo4FootqNb1nWP7Lg.png\" alt=\"\" width=\"646\" height=\"364\" \u002F\u003E Elemento fantasma em ação[\u002Fcaption]\r\n\r\n\u003C\u002Fdiv\u003E\u003C\u002Ffigure\u003E\r\n\u003Cp id=\"9a15\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EO segredo está na animação ghost-loading. Esta animação na caixinha onde o conteúdo será carregado chama a atenção do usuário e faz com que a percepção de tempo de carregamento seja menor!\u003C\u002Fp\u003E\r\n\u003Cp id=\"9a4d\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003E—\u003C\u002Fp\u003E\r\n\r\n\u003Ch3 id=\"8568\" class=\"or os ho bf ot ou ov ow fg ox oy oz fj pa pb pc pd pe pf pg ph pi pj pk pl pm bk\"\u003ERepositório\u003C\u002Fh3\u003E\r\n\u003Cp id=\"eaca\" class=\"pw-post-body-paragraph nw nx ho ny b nz pn ob oc od po of og fk pp oi oj fn pq ol om fq pr oo op oq gp bk\" data-selectable-paragraph=\"\"\u003E\u003Ca class=\"ag qt\" href=\"https:\u002F\u002Fgithub.com\u002FProfessor-DiegoPinho\u002Fghost-elements-loader\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003Ehttps:\u002F\u002Fgithub.com\u002FProfessor-DiegoPinho\u002Fghost-elements-loader\u003C\u002Fa\u003E\u003C\u002Fp\u003E\r\n\r\n\u003Ch3 id=\"1a75\" class=\"or os ho bf ot ou ov ow fg ox oy oz fj pa pb pc pd pe pf pg ph pi pj pk pl pm bk\"\u003EAgradecimentos\u003C\u002Fh3\u003E\r\n\u003Cp id=\"ec15\" class=\"pw-post-body-paragraph nw nx ho ny b nz pn ob oc od po of og fk pp oi oj fn pq ol om fq pr oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EGostou deste conteúdo? Então curta, compartilhe e se inscreva na publicação para não perder nada! 👏\u003C\u002Fp\u003E\r\n\u003Cp id=\"b404\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003E—\u003C\u002Fp\u003E\r\n\r\n\u003Ch3 id=\"c526\" class=\"or os ho bf ot ou ov ow fg ox oy oz fj pa pb pc pd pe pf pg ph pi pj pk pl pm bk\"\u003EVersão em vídeo\u003C\u002Fh3\u003E\r\n\u003Cp id=\"bc26\" class=\"pw-post-body-paragraph nw nx ho ny b nz pn ob oc od po of og fk pp oi oj fn pq ol om fq pr oo op oq gp bk\" data-selectable-paragraph=\"\"\u003EConfira a versão em vídeo desse artigo!\u003C\u002Fp\u003E\r\n\r\n\u003Cfigure class=\"ps pt pu pv pw my\"\u003E\r\n\u003Cdiv class=\"px es m ee\"\u003E\r\n\u003Cdiv class=\"py pz m\"\u003E\u003Ciframe class=\"eo o he dz bh\" title=\"Elementos Fantasmas: O Truque de UX para Carregamentos Mais Rápidos!\" src=\"https:\u002F\u002Fcdn.embedly.com\u002Fwidgets\u002Fmedia.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FdklTHU9I48M%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DdklTHU9I48M&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FdklTHU9I48M%2Fhqdefault.jpg&type=text%2Fhtml&schema=youtube\" width=\"854\" height=\"480\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\" data-mce-fragment=\"1\"\u003E\u003C\u002Fiframe\u003E\u003C\u002Fdiv\u003E\r\n\u003C\u002Fdiv\u003E\r\n\u003Cfigcaption class=\"qa qb qc nh ni qd qe bf b bg ab dx\"\u003EBu!\u003C\u002Ffigcaption\u003E\u003C\u002Ffigure\u003E\r\n\u003Cp id=\"f9ba\" class=\"pw-post-body-paragraph nw nx ho ny b nz oa ob oc od oe of og fk oh oi oj fn ok ol om fq on oo op oq gp bk\" data-selectable-paragraph=\"\"\u003E—\u003C\u002Fp\u003E","excerpt":"\u003Cp\u003ENão tem nada pior para a experiência do usuário do que acessar um site e ter a tela vazia… É nestas situações que usamos o elementos fantasmas! (bu!) 👻\u003C\u002Fp\u003E\n","link":"https:\u002F\u002Fimasters.com.br\u002Fdesenvolvimento\u002Felementos-fantasmas-o-truque-de-ux-para-carregamentos-mais-rapidos","date":"28 mai, 2025","thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2025\u002F05\u002F26160514\u002FDesenvolvimento.jpg","externalMention":"","author":{"id":"144418","thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2018\u002F05\u002F30171243\u002Fdiego-pinho.jpg","name":"Diego Pinho","description":"Bacharel em Ciência da Computação pela PUCSP e MBA em Gestão da Tecnologia da Informação na FIAP. Autor do livro ECMAScript 6 - Entre de cabeça no futuro do JavaScript. Cofundador da Code Prestige e Community Manager no iMasters.","slug":"diegopinho","url":"https:\u002F\u002Fimasters.com.br\u002Fperfil\u002Fdiegopinho","registered":"2013-08-13 18:00:53","social":{"linkedin":null,"youtube":null,"facebook":"","twitter":"https:\u002F\u002Ftwitter.com\u002FDiegoPinho","instagram":null,"github":null,"url":"http:\u002F\u002Fwww.diegopinho.com.br","mail":"diego.pinho@imasters.com.br"},"articles_count":113,"views_count":1276900,"certifications":null,"conquests":null,"office":null},"categories":[{"title":"CSS","slug":"css","id":7219,"link":"https:\u002F\u002Fimasters.com.br\u002Fcss"},{"title":"Desenvolvimento","slug":"desenvolvimento","id":7234,"link":"https:\u002F\u002Fimasters.com.br\u002Fdesenvolvimento"},{"title":"HTML","slug":"html","id":7221,"link":"https:\u002F\u002Fimasters.com.br\u002Fhtml"},{"title":"JavaScript","slug":"javascript","id":7220,"link":"https:\u002F\u002Fimasters.com.br\u002Fjavascript"}],"tags":[{"title":"desenvolvimento","slug":"desenvolvimento-2","id":186,"link":"https:\u002F\u002Fimasters.com.br\u002Fdesenvolvimento-2"},{"title":"desenvolvimento web","slug":"desenvolvimento-web","id":5269,"link":"https:\u002F\u002Fimasters.com.br\u002Fdesenvolvimento-web"},{"title":"Elementos Fantasmas","slug":"elementos-fantasmas","id":9237,"link":"https:\u002F\u002Fimasters.com.br\u002Felementos-fantasmas"},{"title":"ghost","slug":"ghost","id":3176,"link":"https:\u002F\u002Fimasters.com.br\u002Fghost"},{"title":"ghost-loading","slug":"ghost-loading","id":9238,"link":"https:\u002F\u002Fimasters.com.br\u002Fghost-loading"},{"title":"html","slug":"html-2","id":405,"link":"https:\u002F\u002Fimasters.com.br\u002Fhtml-2"},{"title":"javascript","slug":"javascript-2","id":214,"link":"https:\u002F\u002Fimasters.com.br\u002Fjavascript-2"},{"title":"placeholders","slug":"placeholders","id":9239,"link":"https:\u002F\u002Fimasters.com.br\u002Fplaceholders"}],"relateds":[],"seo":[],"type":"post"},{"id":163520,"title":"Popups nativos no navegador (Popover API) sem JavaScript!","content":"\u003Cp id=\"6acb\" class=\"pw-post-body-paragraph nv nw hn nx b ny nz oa ob oc od oe of fj og oh oi fm oj ok ol fp om on oo op go bj\" data-selectable-paragraph=\"\"\u003EPopups estão em toda parte. Eles são amplamente utilizados para diversos fins, como exibir anúncios, captar leads (através de formulários), fornecer notificações ou oferecer interações rápidas com o usuário.\u003C\u002Fp\u003E\r\n\u003Cp id=\"a40f\" class=\"pw-post-body-paragraph nv nw hn nx b ny nz oa ob oc od oe of fj og oh oi fm oj ok ol fp om on oo op go bj\" data-selectable-paragraph=\"\"\u003EEmbora possam ser úteis para chamar a atenção ou aumentar a conversão, seu uso excessivo ou intrusivo pode prejudicar a experiência do usuário, tornando importante o equilíbrio entre relevância e frequência.\u003C\u002Fp\u003E\r\n\u003Cp id=\"f6d8\" class=\"pw-post-body-paragraph nv nw hn nx b ny nz oa ob oc od oe of fj og oh oi fm oj ok ol fp om on oo op go bj\" data-selectable-paragraph=\"\"\u003EImplementar um popup não é nenhuma tarefa de outro mundo, mas também não é tão trivial quanto gostaríamos. É ncessário criar a interface com HTML, customizar sua aparência com CSS e lidar com os diferentes casos de interação com o JS.\u003C\u002Fp\u003E\r\n\u003Cp id=\"dd7b\" class=\"pw-post-body-paragraph nv nw hn nx b ny nz oa ob oc od oe of fj og oh oi fm oj ok ol fp om on oo op go bj\" data-selectable-paragraph=\"\"\u003EÉ por isso mesmo que geralmente usamos bibliotecas como o SweetAlert2 para fazer isso pra gente. Mas e se eu te disser que já existe uma API nativa para fazer isso? Estou falando da API popover! E sabe o melhor? Não precisamos nem de JavaScript! 😮\u003C\u002Fp\u003E\r\n\u003Cp id=\"d1ba\" class=\"pw-post-body-paragraph nv nw hn nx b ny nz oa ob oc od oe of fj og oh oi fm oj ok ol fp om on oo op go bj\" data-selectable-paragraph=\"\"\u003EPara exemplificar o seu funcionamento, nós faremos uma pequena janelinha para que o usuário se cadastre na nossa newsletter.\u003C\u002Fp\u003E\r\n\u003Cp id=\"b136\" class=\"pw-post-body-paragraph nv nw hn nx b ny nz oa ob oc od oe of fj og oh oi fm oj ok ol fp om on oo op go bj\" data-selectable-paragraph=\"\"\u003EA primeira coisa que precisaremos é de um botão que vai acionar a nossa caixinha:\u003C\u002Fp\u003E\r\n\r\n\u003Cpre\u003E\u003Ccode class=\"line-numbers language-html\"\u003E<!DOCTYPE html>\r\n<html lang=\"pt-br\">\r\n\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Popover API<\u002Ftitle>\r\n<\u002Fhead>\r\n\r\n<body>\r\n <button>\r\n Inscreva-se na nossa newsletter!\r\n <\u002Fbutton>\r\n<\u002Fbody>\r\n\r\n<\u002Fhtml>\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\r\n\u003Cp data-selectable-paragraph=\"\"\u003EAgora vamos atrelar este comportamento com a janela que desejamos que apareça. Para isso, usamos o atributo \u003Cstrong class=\"nx ho\"\u003Epopovertarget\u003C\u002Fstrong\u003E. Veja:\u003C\u002Fp\u003E\r\n\r\n\u003Cpre\u003E\u003Ccode class=\"line-numbers language-html\"\u003E<!DOCTYPE html>\r\n<html lang=\"pt-br\">\r\n\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Popover API<\u002Ftitle>\r\n <style>\r\n #newsletter-box::backdrop {\r\n background: rgba(0, 0, 0, 0.6);\r\n }\r\n <\u002Fstyle>\r\n<\u002Fhead>\r\n\r\n<body>\r\n <button popovertarget=\"newsletter-box\">\r\n Inscreva-se na nossa newsletter!\r\n <\u002Fbutton>\r\n\r\n <div id=\"newsletter-box\" popover>\r\n O conteúdo fica aqui\r\n <\u002Fdiv>\r\n\r\n<\u002Fbody>\r\n\r\n<\u002Fhtml>\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\r\n\u003Cp id=\"00da\" class=\"pw-post-body-paragraph nv nw hn nx b ny nz oa ob oc od oe of fj og oh oi fm oj ok ol fp om on oo op go bj\" data-selectable-paragraph=\"\"\u003EOlha só que legal o resultado!\u003C\u002Fp\u003E\r\n\r\n\u003Cfigure class=\"pr ps pt pu pv mx ng nh paragraph-image\"\u003E\r\n\u003Cdiv class=\"nq nr ed ns bg nt\" tabindex=\"0\" role=\"button\"\u003E\r\n\u003Cdiv class=\"ng nh qi\"\u003E\u003Cpicture\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002Fformat:webp\u002F1*f7P3E6KoZ2Hw9akS7X1I9g.gif 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002Fformat:webp\u002F1*f7P3E6KoZ2Hw9akS7X1I9g.gif 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002Fformat:webp\u002F1*f7P3E6KoZ2Hw9akS7X1I9g.gif 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002Fformat:webp\u002F1*f7P3E6KoZ2Hw9akS7X1I9g.gif 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002Fformat:webp\u002F1*f7P3E6KoZ2Hw9akS7X1I9g.gif 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002Fformat:webp\u002F1*f7P3E6KoZ2Hw9akS7X1I9g.gif 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1400\u002Fformat:webp\u002F1*f7P3E6KoZ2Hw9akS7X1I9g.gif 1400w\" type=\"image\u002Fwebp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px\" \u002F\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002F1*f7P3E6KoZ2Hw9akS7X1I9g.gif 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002F1*f7P3E6KoZ2Hw9akS7X1I9g.gif 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002F1*f7P3E6KoZ2Hw9akS7X1I9g.gif 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002F1*f7P3E6KoZ2Hw9akS7X1I9g.gif 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002F1*f7P3E6KoZ2Hw9akS7X1I9g.gif 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002F1*f7P3E6KoZ2Hw9akS7X1I9g.gif 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1400\u002F1*f7P3E6KoZ2Hw9akS7X1I9g.gif 1400w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px\" data-testid=\"og\" \u002F\u003E\u003Cimg class=\"bg eq nu c\" role=\"presentation\" src=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:656\u002F1*f7P3E6KoZ2Hw9akS7X1I9g.gif\" alt=\"\" width=\"700\" height=\"511\" \u002F\u003E\u003C\u002Fpicture\u003E\u003C\u002Fdiv\u003E\r\n\u003C\u002Fdiv\u003E\u003C\u002Ffigure\u003E\r\n\u003Cp id=\"fcac\" class=\"pw-post-body-paragraph nv nw hn nx b ny nz oa ob oc od oe of fj og oh oi fm oj ok ol fp om on oo op go bj\" data-selectable-paragraph=\"\"\u003EMas e se não ficar claro para o usuário que ele deve clicar fora do modal ou usar a tecla \u003Ccode class=\"cw qj qk ql qa b\"\u003Eesc\u003C\u002Fcode\u003E para sair?\u003C\u002Fp\u003E\r\n\u003Cp id=\"550c\" class=\"pw-post-body-paragraph nv nw hn nx b ny nz oa ob oc od oe of fj og oh oi fm oj ok ol fp om on oo op go bj\" data-selectable-paragraph=\"\"\u003ENeste caso, podemos alterar o atributo \u003Ccode class=\"cw qj qk ql qa b\"\u003Epopover\u003C\u002Fcode\u003E do nosso modal para ser manual!\u003C\u002Fp\u003E\r\n\r\n\u003Cpre\u003E\u003Ccode class=\"line-numbers language-html\"\u003E<div id=\"newsletter-box\" popover=\"manual\">\r\n O conteúdo fica aqui\r\n<\u002Fdiv>\r\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\r\nSó que agora está impossível sair do modal! Vamos adicionar um botão para acionar o comportamento de fechar.\r\n\u003Cpre\u003E\u003Ccode class=\"line-numbers language-html\"\u003E<div id=\"newsletter-box\" popover=\"manual\">\r\n <button class=\"close-btn\" popovertarget=\"newsletter-box\" popovertargetaction=\"hide\">\r\n <span aria-hidden=\"true\">❌<\u002Fspan>\r\n <\u002Fbutton>\r\n <p>O conteúdo fica aqui<\u002Fp>\r\n<\u002Fdiv>\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\r\n\u003Cp id=\"7f44\" class=\"pw-post-body-paragraph nv nw hn nx b ny nz oa ob oc od oe of fj og oh oi fm oj ok ol fp om on oo op go bj\" data-selectable-paragraph=\"\"\u003EPronto! Inclusive agora podemos tirar o valor “manual” do atributo popover e ter os dois comportamentos!\u003C\u002Fp\u003E\r\n\u003Cp id=\"2da5\" class=\"pw-post-body-paragraph nv nw hn nx b ny nz oa ob oc od oe of fj og oh oi fm oj ok ol fp om on oo op go bj\" data-selectable-paragraph=\"\"\u003E—\u003C\u002Fp\u003E\r\n\r\n\u003Ch3 id=\"c425\" class=\"oq or hn be os ot ou ov ff ow ox oy fi oz pa pb pc pd pe pf pg ph pi pj pk pl bj\"\u003E\u003Cspan style=\"font-size: 18pt;\"\u003ERepositório\u003C\u002Fspan\u003E\u003C\u002Fh3\u003E\r\n\u003Cp id=\"3db0\" class=\"pw-post-body-paragraph nv nw hn nx b ny pm oa ob oc pn oe of fj po oh oi fm pp ok ol fp pq on oo op go bj\" data-selectable-paragraph=\"\"\u003E\u003Ca class=\"af qm\" href=\"https:\u002F\u002Fgithub.com\u002FProfessor-DiegoPinho\u002Fpopover-api\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003Ehttps:\u002F\u002Fgithub.com\u002FProfessor-DiegoPinho\u002Fpopover-api\u003C\u002Fa\u003E\u003C\u002Fp\u003E\r\n\u003Cp id=\"2da5\" class=\"pw-post-body-paragraph nv nw hn nx b ny nz oa ob oc od oe of fj og oh oi fm oj ok ol fp om on oo op go bj\" data-selectable-paragraph=\"\"\u003E—\u003C\u002Fp\u003E\r\n\r\n\u003Ch3 id=\"eea3\" class=\"oq or hn be os ot ou ov ff ow ox oy fi oz pa pb pc pd pe pf pg ph pi pj pk pl bj\"\u003E\u003Cspan style=\"font-size: 18pt;\"\u003EVersão em vídeo\u003C\u002Fspan\u003E\u003C\u002Fh3\u003E\r\n\u003Cp id=\"9a4b\" class=\"pw-post-body-paragraph nv nw hn nx b ny pm oa ob oc pn oe of fj po oh oi fm pp ok ol fp pq on oo op go bj\" data-selectable-paragraph=\"\"\u003EConfira a versão em vídeo desse artigo!\u003C\u002Fp\u003E\r\n\r\n\u003Cfigure class=\"pr ps pt pu pv mx\"\u003E\r\n\u003Cdiv class=\"pw er l ed\"\u003E\r\n\u003Cdiv class=\"px py l\"\u003E\u003Ciframe class=\"em n hd dy bg\" title=\"Popups nativos com a Popover API [HTML\u002FCSS]\" src=\"https:\u002F\u002Fcdn.embedly.com\u002Fwidgets\u002Fmedia.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2Fu7lvwQ1tryc%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Du7lvwQ1tryc&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2Fu7lvwQ1tryc%2Fhqdefault.jpg&type=text%2Fhtml&schema=youtube\" width=\"854\" height=\"480\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\" data-mce-fragment=\"1\"\u003E\u003C\u002Fiframe\u003E\u003C\u002Fdiv\u003E\r\n\u003C\u002Fdiv\u003E\u003C\u002Ffigure\u003E\r\n\u003Cp id=\"7c64\" class=\"pw-post-body-paragraph nv nw hn nx b ny nz oa ob oc od oe of fj og oh oi fm oj ok ol fp om on oo op go bj\" data-selectable-paragraph=\"\"\u003E—\u003C\u002Fp\u003E","excerpt":"\u003Cp\u003EPopups estão em toda parte. Eles são amplamente utilizados para diversos fins, como exibir anúncios, captar leads (através de formulários), fornecer…\u003C\u002Fp\u003E\n","link":"https:\u002F\u002Fimasters.com.br\u002Fcss\u002Fpopups-nativos-no-navegador-popover-api-sem-javascript","date":"19 mai, 2025","thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2025\u002F05\u002F15145637\u002FCSS.jpg","externalMention":"","author":{"id":"144418","thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2018\u002F05\u002F30171243\u002Fdiego-pinho.jpg","name":"Diego Pinho","description":"Bacharel em Ciência da Computação pela PUCSP e MBA em Gestão da Tecnologia da Informação na FIAP. Autor do livro ECMAScript 6 - Entre de cabeça no futuro do JavaScript. Cofundador da Code Prestige e Community Manager no iMasters.","slug":"diegopinho","url":"https:\u002F\u002Fimasters.com.br\u002Fperfil\u002Fdiegopinho","registered":"2013-08-13 18:00:53","social":{"linkedin":null,"youtube":null,"facebook":"","twitter":"https:\u002F\u002Ftwitter.com\u002FDiegoPinho","instagram":null,"github":null,"url":"http:\u002F\u002Fwww.diegopinho.com.br","mail":"diego.pinho@imasters.com.br"},"articles_count":113,"views_count":1276900,"certifications":null,"conquests":null,"office":null},"categories":[{"title":"CSS","slug":"css","id":7219,"link":"https:\u002F\u002Fimasters.com.br\u002Fcss"},{"title":"HTML","slug":"html","id":7221,"link":"https:\u002F\u002Fimasters.com.br\u002Fhtml"},{"title":"Tecnologia","slug":"tecnologia","id":4254,"link":"https:\u002F\u002Fimasters.com.br\u002Ftecnologia"},{"title":"Tendências","slug":"tendencias","id":7264,"link":"https:\u002F\u002Fimasters.com.br\u002Ftendencias"}],"tags":[{"title":"CSS","slug":"css","id":4250,"link":"https:\u002F\u002Fimasters.com.br\u002Fcss"},{"title":"html","slug":"html-2","id":405,"link":"https:\u002F\u002Fimasters.com.br\u002Fhtml-2"}],"relateds":[],"seo":[],"type":"post"},{"id":163359,"title":"Como enviar e-mails com o JavaScript usando o EmailJS","content":"\u003Cp id=\"d1ec\" class=\"pw-post-body-paragraph nx ny ho nz b oa ob oc od oe of og oh fl oi oj ok fo ol om on fr oo op oq or gp bk\" data-selectable-paragraph=\"\"\u003ETer um formulário de contato no seu site pessoal ou do seu negócio geralmente é uma boa ideia, afinal de contas, facilita muito o contato das pessoas com você.\u003C\u002Fp\u003E\r\n\u003Cp id=\"044f\" class=\"pw-post-body-paragraph nx ny ho nz b oa ob oc od oe of og oh fl oi oj ok fo ol om on fr oo op oq or gp bk\" data-selectable-paragraph=\"\"\u003EImplementar um formulário no HTML não é muito difícil, mas existe um problemão: \u003Cstrong class=\"nz hp\"\u003Ecomo vamos enviar um e-mail a partir daquele formulário?\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\r\n\u003Cp id=\"fec4\" class=\"pw-post-body-paragraph nx ny ho nz b oa ob oc od oe of og oh fl oi oj ok fo ol om on fr oo op oq or gp bk\" data-selectable-paragraph=\"\"\u003ECaso você esteja usando um serviço de hospedagem como o Hostgator, Hostinger e afins, talvez você consiga utilizar o servidor PHP destas hospedagens para isso. Pode ser meio chato de configurar, mas funciona.\u003C\u002Fp\u003E\r\n\u003Cp id=\"7564\" class=\"pw-post-body-paragraph nx ny ho nz b oa ob oc od oe of og oh fl oi oj ok fo ol om on fr oo op oq or gp bk\" data-selectable-paragraph=\"\"\u003EMas quando isso não é possível, nós precisamos de um back-end.\u003C\u002Fp\u003E\r\n\u003Cp id=\"7f19\" class=\"pw-post-body-paragraph nx ny ho nz b oa ob oc od oe of og oh fl oi oj ok fo ol om on fr oo op oq or gp bk\" data-selectable-paragraph=\"\"\u003EE como eu sei que você não está afim de fazer um back-end para o seu site só pra isso (até porque você vai ter um outra dor de cabeça pra conseguir hospedar este outro serviço), hoje eu vou te mostrar como usar o \u003Ca class=\"ag os\" href=\"https:\u002F\u002Fwww.emailjs.com\u002F\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003E\u003Cstrong class=\"nz hp\"\u003EEmailJS\u003C\u002Fstrong\u003E\u003C\u002Fa\u003E!\u003C\u002Fp\u003E\r\n\r\n\u003Ch2\u003EEmailJS\u003C\u002Fh2\u003E\r\n\u003Cp id=\"12ca\" class=\"pw-post-body-paragraph nx ny ho nz b oa ob oc od oe of og oh fl oi oj ok fo ol om on fr oo op oq or gp bk\" data-selectable-paragraph=\"\"\u003EEle vai facilitar bastante este processo.\u003C\u002Fp\u003E\r\n\u003Cp id=\"c44e\" class=\"pw-post-body-paragraph nx ny ho nz b oa ob oc od oe of og oh fl oi oj ok fo ol om on fr oo op oq or gp bk\" data-selectable-paragraph=\"\"\u003EComo a própria tela inicial do site já diz, a ideia do EmailJS é que você possa enviar um e-mail diretamente do seu código, sem a necessidade de um servidor. Pois bem, vamos ver então como isso funciona.\u003C\u002Fp\u003E\r\n\r\n\u003Cfigure class=\"pu pv pw px py mz ni nj paragraph-image\"\u003E\r\n\u003Cdiv class=\"ns nt ef nu bh nv\" tabindex=\"0\" role=\"button\"\u003E\r\n\u003Cdiv class=\"ni nj qh\"\u003E\u003Cpicture\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002Fformat:webp\u002F1*_5UEbB5V6jnfZqYaibJBcQ.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002Fformat:webp\u002F1*_5UEbB5V6jnfZqYaibJBcQ.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002Fformat:webp\u002F1*_5UEbB5V6jnfZqYaibJBcQ.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002Fformat:webp\u002F1*_5UEbB5V6jnfZqYaibJBcQ.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002Fformat:webp\u002F1*_5UEbB5V6jnfZqYaibJBcQ.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002Fformat:webp\u002F1*_5UEbB5V6jnfZqYaibJBcQ.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1400\u002Fformat:webp\u002F1*_5UEbB5V6jnfZqYaibJBcQ.png 1400w\" type=\"image\u002Fwebp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px\" \u002F\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002F1*_5UEbB5V6jnfZqYaibJBcQ.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002F1*_5UEbB5V6jnfZqYaibJBcQ.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002F1*_5UEbB5V6jnfZqYaibJBcQ.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002F1*_5UEbB5V6jnfZqYaibJBcQ.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002F1*_5UEbB5V6jnfZqYaibJBcQ.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002F1*_5UEbB5V6jnfZqYaibJBcQ.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1400\u002F1*_5UEbB5V6jnfZqYaibJBcQ.png 1400w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px\" data-testid=\"og\" \u002F\u003E\u003Cimg class=\"bh es nw c\" role=\"presentation\" src=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1050\u002F1*_5UEbB5V6jnfZqYaibJBcQ.png\" alt=\"\" width=\"700\" height=\"438\" \u002F\u003E\u003C\u002Fpicture\u003E\u003C\u002Fdiv\u003E\r\n\u003C\u002Fdiv\u003E\r\n\u003Cfigcaption class=\"qc qd qe ni nj qf qg bf b bg z dz\" data-selectable-paragraph=\"\"\u003ETela inicial do EmailJS\u003C\u002Ffigcaption\u003E\u003C\u002Ffigure\u003E\r\n\u003Cp id=\"779d\" class=\"pw-post-body-paragraph nx ny ho nz b oa ob oc od oe of og oh fl oi oj ok fo ol om on fr oo op oq or gp bk\" data-selectable-paragraph=\"\"\u003EPara entender como tudo funciona, vamos começar pela construção de um formulário simples \u003Cem class=\"qi\"\u003E(o código completo do repositório você encontra no final do artigo)\u003C\u002Fem\u003E:\u003C\u002Fp\u003E\r\n\r\n\u003Ch3 id=\"794c\" class=\"pw-post-body-paragraph nx ny ho nz b oa ob oc od oe of og oh fl oi oj ok fo ol om on fr oo op oq or gp bk\"\u003E\u003Cspan style=\"font-size: 18pt;\"\u003E\u003Cstrong class=\"nz hp\"\u003Eindex.html\u003C\u002Fstrong\u003E\u003C\u002Fspan\u003E\u003C\u002Fh3\u003E\r\n\u003Cpre\u003E\u003Ccode class=\"line-numbers language-html\"\u003E<!DOCTYPE html>\r\n<html lang=\"pt-br\">\r\n\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Formulário<\u002Ftitle>\r\n <link rel=\"stylesheet\" href=\"style.css\">\r\n<\u002Fhead>\r\n\r\n<body>\r\n <form id=\"form\">\r\n <label for=\"nome\">Nome<\u002Flabel>\r\n <input type=\"text\" id=\"nome\" name=\"nome\" required>\r\n <br>\r\n <label for=\"email\">Email<\u002Flabel>\r\n <input type=\"email\" id=\"email\" name=\"email\" required>\r\n <br>\r\n <label for=\"mensagem\">Mensagem<\u002Flabel>\r\n <textarea id=\"mensagem\" name=\"mensagem\" required><\u002Ftextarea>\r\n <input type=\"submit\" value=\"Enviar\">\r\n <\u002Fform>\r\n\r\n <script src=\"script.js\"><\u002Fscript>\r\n<\u002Fbody>\r\n\r\n<\u002Fhtml>\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\r\n\u003Ch3\u003E\u003Cspan style=\"font-size: 18pt;\"\u003E\u003Cstrong class=\"nz hp\"\u003Estyle.css\u003C\u002Fstrong\u003E\u003C\u002Fspan\u003E\u003C\u002Fh3\u003E\r\n\u003Cpre\u003E\u003Ccode class=\"line-numbers language-css\"\u003E@import url('https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');\r\n\r\n* {\r\n box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n font-family: \"Roboto\", serif;\r\n margin: 0;\r\n padding: 0;\r\n background-color: aliceblue;\r\n width: 100vw;\r\n height: 100vh;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n#form {\r\n background-color: #fff;\r\n padding: 20px;\r\n border-radius: 8px;\r\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n max-width: 400px;\r\n width: 100%;\r\n}\r\n\r\n#form label {\r\n display: block;\r\n margin-bottom: 5px;\r\n font-weight: bold;\r\n color: #333;\r\n}\r\n\r\n#form input[type=\"text\"],\r\n#form input[type=\"email\"],\r\n#form textarea {\r\n width: 100%;\r\n padding: 10px;\r\n margin-bottom: 15px;\r\n border: 1px solid #ddd;\r\n border-radius: 4px;\r\n font-size: 14px;\r\n box-sizing: border-box;\r\n}\r\n\r\n#form textarea {\r\n resize: vertical;\r\n min-height: 80px;\r\n}\r\n\r\n#form input[type=\"submit\"] {\r\n background-color: #007BFF;\r\n color: white;\r\n padding: 10px 15px;\r\n border: none;\r\n border-radius: 4px;\r\n cursor: pointer;\r\n font-size: 16px;\r\n}\r\n\r\n#form input[type=\"submit\"]:hover {\r\n background-color: #0056b3;\r\n}\r\n\r\n#form input:focus,\r\n#form textarea:focus {\r\n border-color: #007BFF;\r\n outline: none;\r\n box-shadow: 0 0 4px rgba(0, 123, 255, 0.25);\r\n}\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\r\n\u003Ch3\u003E\u003Cspan style=\"font-size: 18pt;\"\u003E\u003Cstrong class=\"nz hp\"\u003Escript.js\u003C\u002Fstrong\u003E\u003C\u002Fspan\u003E\u003C\u002Fh3\u003E\r\n\u003Cpre\u003E\u003Ccode class=\"line-numbers language-javascript\"\u003Econst form = document.querySelector('#form');\r\nform.addEventListener('submit', (e) => {\r\n e.preventDefault();\r\n console.log(\"passei aqui!\");\r\n});\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\r\n\u003Cp data-selectable-paragraph=\"\"\u003EO primeiro passo para usar a ferramenta será inserir o código da biblioteca dentro do nosso projeto. Farei isso usando um CDN:\u003C\u002Fp\u003E\r\n\r\n\u003Cpre\u003E\u003Ccode class=\"line-numbers language-javascript\"\u003E<script type=\"text\u002Fjavascript\" src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@emailjs\u002Fbrowser@4\u002Fdist\u002Femail.min.js\"><\u002Fscript>\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\r\n\u003Cp id=\"f23e\" class=\"pw-post-body-paragraph nx ny ho nz b oa ob oc od oe of og oh fl oi oj ok fo ol om on fr oo op oq or gp bk\" data-selectable-paragraph=\"\"\u003EAgora, antes de continuarmos o código, precisamos de uma \u003Cstrong class=\"nz hp\"\u003EAPI KEY\u003C\u002Fstrong\u003E. Essa chave você conseguirá apenas depois de criar sua conta e acessar a área de configurações no site. Será semelhante a esta aqui:\u003C\u002Fp\u003E\r\n\r\n\u003Cfigure class=\"pu pv pw px py mz ni nj paragraph-image\"\u003E\r\n\u003Cdiv class=\"ni nj qs\"\u003E\u003Cpicture\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002Fformat:webp\u002F1*oOHyswkp5zdlbulwONGFag.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002Fformat:webp\u002F1*oOHyswkp5zdlbulwONGFag.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002Fformat:webp\u002F1*oOHyswkp5zdlbulwONGFag.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002Fformat:webp\u002F1*oOHyswkp5zdlbulwONGFag.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002Fformat:webp\u002F1*oOHyswkp5zdlbulwONGFag.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002Fformat:webp\u002F1*oOHyswkp5zdlbulwONGFag.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1142\u002Fformat:webp\u002F1*oOHyswkp5zdlbulwONGFag.png 1142w\" type=\"image\u002Fwebp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 571px\" \u002F\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002F1*oOHyswkp5zdlbulwONGFag.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002F1*oOHyswkp5zdlbulwONGFag.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002F1*oOHyswkp5zdlbulwONGFag.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002F1*oOHyswkp5zdlbulwONGFag.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002F1*oOHyswkp5zdlbulwONGFag.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002F1*oOHyswkp5zdlbulwONGFag.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1142\u002F1*oOHyswkp5zdlbulwONGFag.png 1142w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 571px\" data-testid=\"og\" \u002F\u003E\u003Cimg class=\"bh es nw c\" role=\"presentation\" src=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:857\u002F1*oOHyswkp5zdlbulwONGFag.png\" alt=\"\" width=\"571\" height=\"446\" \u002F\u003E\u003C\u002Fpicture\u003E\u003C\u002Fdiv\u003E\r\n\u003Cfigcaption class=\"qc qd qe ni nj qf qg bf b bg z dz\" data-selectable-paragraph=\"\"\u003EChave pública de API utilizada atribuída ao usuário criado no EmailJS\u003C\u002Ffigcaption\u003E\u003C\u002Ffigure\u003E\r\n\u003Cp id=\"dbc5\" class=\"pw-post-body-paragraph nx ny ho nz b oa ob oc od oe of og oh fl oi oj ok fo ol om on fr oo op oq or gp bk\" data-selectable-paragraph=\"\"\u003ECom essa chave em mãos, podemos voltar para o nosso \u003Cstrong class=\"nz hp\"\u003Escript.js\u003C\u002Fstrong\u003E e inicializar o serviço:\u003C\u002Fp\u003E\r\n\r\n\u003Cpre\u003E\u003Ccode class=\"line-numbers language-javascript\"\u003Eemailjs.init({\r\n publicKey: \"A CHAVE DE API AQUI\",\r\n});\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\r\n\u003Cp id=\"d608\" class=\"pw-post-body-paragraph nx ny ho nz b oa ob oc od oe of og oh fl oi oj ok fo ol om on fr oo op oq or gp bk\" data-selectable-paragraph=\"\"\u003EAgora voltaremos pro painel do EmailJS porque precisamos configurar duas outras coisas fundamentais:\u003C\u002Fp\u003E\r\n\r\n\u003Cul class=\"\"\u003E\r\n \t\u003Cli id=\"c50c\" class=\"nx ny ho nz b oa ob oc od oe of og oh fl oi oj ok fo ol om on fr oo op oq or qt qu qv bk\" data-selectable-paragraph=\"\"\u003EUm e-mail de serviço (email service);\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"379f\" class=\"nx ny ho nz b oa qw oc od oe qx og oh fl qy oj ok fo qz om on fr ra op oq or qt qu qv bk\" data-selectable-paragraph=\"\"\u003EUm template de e-mail (email template).\u003C\u002Fli\u003E\r\n\u003C\u002Ful\u003E\r\n\u003Cp id=\"6387\" class=\"pw-post-body-paragraph nx ny ho nz b oa ob oc od oe of og oh fl oi oj ok fo ol om on fr oo op oq or gp bk\" data-selectable-paragraph=\"\"\u003EO serviço de e-mail será basicamente a configuração da sua conta de e-mail que será usada para o envio dos e-mails. Você consegue usar os principais serviços de e-mail do mercado (Gmail, iCloud, Outlook) ou configurar o próprio servidor SMTP.\u003C\u002Fp\u003E\r\n\r\n\u003Cfigure class=\"pu pv pw px py mz ni nj paragraph-image\"\u003E\r\n\u003Cdiv class=\"ni nj rb\"\u003E\u003Cpicture\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002Fformat:webp\u002F1*D_ZTDR4XconriYiO1-KTGw.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002Fformat:webp\u002F1*D_ZTDR4XconriYiO1-KTGw.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002Fformat:webp\u002F1*D_ZTDR4XconriYiO1-KTGw.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002Fformat:webp\u002F1*D_ZTDR4XconriYiO1-KTGw.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002Fformat:webp\u002F1*D_ZTDR4XconriYiO1-KTGw.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002Fformat:webp\u002F1*D_ZTDR4XconriYiO1-KTGw.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:868\u002Fformat:webp\u002F1*D_ZTDR4XconriYiO1-KTGw.png 868w\" type=\"image\u002Fwebp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 434px\" \u002F\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002F1*D_ZTDR4XconriYiO1-KTGw.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002F1*D_ZTDR4XconriYiO1-KTGw.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002F1*D_ZTDR4XconriYiO1-KTGw.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002F1*D_ZTDR4XconriYiO1-KTGw.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002F1*D_ZTDR4XconriYiO1-KTGw.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002F1*D_ZTDR4XconriYiO1-KTGw.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:868\u002F1*D_ZTDR4XconriYiO1-KTGw.png 868w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 434px\" data-testid=\"og\" \u002F\u003E\u003Cimg class=\"bh es nw c\" role=\"presentation\" src=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:651\u002F1*D_ZTDR4XconriYiO1-KTGw.png\" alt=\"\" width=\"434\" height=\"472\" \u002F\u003E\u003C\u002Fpicture\u003E\u003C\u002Fdiv\u003E\r\n\u003Cfigcaption class=\"qc qd qe ni nj qf qg bf b bg z dz\" data-selectable-paragraph=\"\"\u003EConfiguração de um serviço de e-mail na plataforma\u003C\u002Ffigcaption\u003E\u003C\u002Ffigure\u003E\r\n\u003Cp id=\"8d45\" class=\"pw-post-body-paragraph nx ny ho nz b oa ob oc od oe of og oh fl oi oj ok fo ol om on fr oo op oq or gp bk\" data-selectable-paragraph=\"\"\u003EFeito isso, partiremos para o template de e-mail.\u003C\u002Fp\u003E\r\n\u003Cp id=\"27f7\" class=\"pw-post-body-paragraph nx ny ho nz b oa ob oc od oe of og oh fl oi oj ok fo ol om on fr oo op oq or gp bk\" data-selectable-paragraph=\"\"\u003EO importante neste template é que você use os campos dinâmicos os com os mesmos nomes que você está usando no seu formulário. Em nosso caso, temos: \u003Cstrong class=\"nz hp\"\u003Enome\u003C\u002Fstrong\u003E, \u003Cstrong class=\"nz hp\"\u003Eemail\u003C\u002Fstrong\u003E e \u003Cstrong class=\"nz hp\"\u003Emessage\u003C\u002Fstrong\u003E. por exemplo:\u003C\u002Fp\u003E\r\n\r\n\u003Cpre\u003E\u003Ccode class=\"line-numbers language-javascript\"\u003EMensagem enviada por: {{name}} <br \u002F>\r\nEmail: {{email}} <br \u002F>\r\nMensagem: {{message}}\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\r\n\u003Cp data-selectable-paragraph=\"\"\u003ETanto o seu template quanto o seu serviço possuem identificadores únicos. Precisaremos deles. Agora sim podemos fechar o nosso arquivo JavaScript com o envio do e-mail:\u003C\u002Fp\u003E\r\n\r\n\u003Cpre\u003E\u003Ccode class=\"line-numbers language-javascript\"\u003Eemailjs.sendForm(ID_DO_SERVICO, ID_DO_TEMPLATE, e.target)\r\n .then((response) => { alert(\"Mensagem enviada com sucesso!\"); })\r\n .catch((error) => {\r\n console.log(error);\r\n alert(\"Ocorreu um erro com o envio do seu e-mail\");\r\n });\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\r\n\u003Cp data-selectable-paragraph=\"\"\u003EO código inteiro ficará semelhante a este:\u003C\u002Fp\u003E\r\n\r\n\u003Cpre\u003E\u003Ccode class=\"line-numbers language-javascript\"\u003Econst form = document.querySelector('#form');\r\nform.addEventListener('submit', (e) => {\r\n e.preventDefault();\r\n\r\n emailjs.init({\r\n publicKey: \"hVsyIaGI0Az4LCK_M\",\r\n });\r\n\r\n emailjs.sendForm(\"ID_DO_SERVICO\", \"ID_DO_TEMPLATE\", form)\r\n .then((response) => alert(\"Mensagem enviada com sucesso!\"))\r\n .catch((error) => {\r\n console.log(error);\r\n alert(\"Erro ao enviar mensagem!\")\r\n });\r\n});\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\r\n\u003Cp id=\"17b4\" class=\"pw-post-body-paragraph nx ny ho nz b oa ob oc od oe of og oh fl oi oj ok fo ol om on fr oo op oq or gp bk\" data-selectable-paragraph=\"\"\u003EE está pronto! Agora é só esperar o contato da galera :)\u003C\u002Fp\u003E\r\n\r\n\u003Ch3 id=\"e0a2\" class=\"ot ou ho bf ov ow ox oy fh oz pa pb fk pc pd pe pf pg ph pi pj pk pl pm pn po bk\"\u003E\u003Cspan style=\"font-size: 18pt;\"\u003ERepositório\u003C\u002Fspan\u003E\u003C\u002Fh3\u003E\r\n\u003Cp id=\"fe29\" class=\"pw-post-body-paragraph nx ny ho nz b oa pp oc od oe pq og oh fl pr oj ok fo ps om on fr pt op oq or gp bk\" data-selectable-paragraph=\"\"\u003E\u003Ca class=\"ag os\" href=\"https:\u002F\u002Fgithub.com\u002FProfessor-DiegoPinho\u002Femail-com-emailjs\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003Ehttps:\u002F\u002Fgithub.com\u002FProfessor-DiegoPinho\u002Femail-com-emailjs\u003C\u002Fa\u003E\u003C\u002Fp\u003E\r\n\r\n\u003Ch3 id=\"1d84\" class=\"ot ou ho bf ov ow ox oy fh oz pa pb fk pc pd pe pf pg ph pi pj pk pl pm pn po bk\"\u003E\u003Cspan style=\"font-size: 18pt;\"\u003EVersão em vídeo\u003C\u002Fspan\u003E\u003C\u002Fh3\u003E\r\n\u003Cp id=\"bc46\" class=\"pw-post-body-paragraph nx ny ho nz b oa pp oc od oe pq og oh fl pr oj ok fo ps om on fr pt op oq or gp bk\" data-selectable-paragraph=\"\"\u003EConfira a versão em vídeo desse artigo!\u003C\u002Fp\u003E\r\n\r\n\u003Cfigure class=\"pu pv pw px py mz\"\u003E\r\n\u003Cdiv class=\"pz et l ef\"\u003E\r\n\u003Cdiv class=\"qa qb l\"\u003E\u003Ciframe class=\"ep n he eb bh\" title=\"Como enviar e-mails com JavaScript\" src=\"https:\u002F\u002Fcdn.embedly.com\u002Fwidgets\u002Fmedia.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FQMTvjsd-oEg%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DQMTvjsd-oEg&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FQMTvjsd-oEg%2Fhqdefault.jpg&type=text%2Fhtml&schema=youtube\" width=\"854\" height=\"480\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\" data-mce-fragment=\"1\"\u003E\u003C\u002Fiframe\u003E\u003C\u002Fdiv\u003E\r\n\u003Cdiv\u003E\u003C\u002Fdiv\u003E\r\n\u003C\u002Fdiv\u003E\r\n\u003Cfigcaption class=\"qc qd qe ni nj qf qg bf b bg z dz\"\u003E\u003C\u002Ffigcaption\u003E\u003C\u002Ffigure\u003E","excerpt":"\u003Cp\u003EComo enviar e-mails com o JavaScript usando o EmailJS. Ter um formulário de contato no seu site pessoal ou do seu negócio geralmente é uma boa ideia, afinal\u003C\u002Fp\u003E\n","link":"https:\u002F\u002Fimasters.com.br\u002Fjavascript\u002Fcomo-enviar-e-mails-com-o-javascript-usando-o-emailjs","date":"16 abr, 2025","thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2025\u002F04\u002F29163133\u002Fjavascript1.jpg","externalMention":"","author":{"id":"144418","thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2018\u002F05\u002F30171243\u002Fdiego-pinho.jpg","name":"Diego Pinho","description":"Bacharel em Ciência da Computação pela PUCSP e MBA em Gestão da Tecnologia da Informação na FIAP. Autor do livro ECMAScript 6 - Entre de cabeça no futuro do JavaScript. Cofundador da Code Prestige e Community Manager no iMasters.","slug":"diegopinho","url":"https:\u002F\u002Fimasters.com.br\u002Fperfil\u002Fdiegopinho","registered":"2013-08-13 18:00:53","social":{"linkedin":null,"youtube":null,"facebook":"","twitter":"https:\u002F\u002Ftwitter.com\u002FDiegoPinho","instagram":null,"github":null,"url":"http:\u002F\u002Fwww.diegopinho.com.br","mail":"diego.pinho@imasters.com.br"},"articles_count":113,"views_count":1276900,"certifications":null,"conquests":null,"office":null},"categories":[{"title":"JavaScript","slug":"javascript","id":7220,"link":"https:\u002F\u002Fimasters.com.br\u002Fjavascript"}],"tags":[{"title":"EmailJS","slug":"emailjs","id":9217,"link":"https:\u002F\u002Fimasters.com.br\u002Femailjs"},{"title":"javascript","slug":"javascript-2","id":214,"link":"https:\u002F\u002Fimasters.com.br\u002Fjavascript-2"},{"title":"js","slug":"js","id":3311,"link":"https:\u002F\u002Fimasters.com.br\u002Fjs"}],"relateds":[],"seo":[],"type":"post"},{"id":163032,"title":"Como usar Faker.js para gerar dados falsos (mas realistas) em JavaScript","content":"No desenvolvimento de software, testar funcionalidades com dados reais nem sempre é a melhor opção. Seja para preservar a privacidade de informações sensíveis ou para simular cenários diversos, a geração de dados falsos é uma excelente alternativa. É aí que entra o \u003Ca class=\"af ov\" href=\"https:\u002F\u002Ffakerjs.dev\u002F\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003E\u003Cstrong class=\"mo fr\"\u003EFaker.js\u003C\u002Fstrong\u003E\u003C\u002Fa\u003E, uma poderosa biblioteca para gerar dados fictícios de maneira rápida e eficiente.\r\n\u003Cdiv class=\"ab cb\"\u003E\r\n\u003Cdiv class=\"ci bh ev ew ex ey\"\u003E\r\n\u003Cp id=\"6512\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EO \u003Cstrong class=\"mo fr\"\u003EFaker.js\u003C\u002Fstrong\u003E é uma biblioteca de código aberto que permite gerar dados falsos para diversos fins, como testes, protótipos e desenvolvimento de software. Com ele, você pode criar:\u003C\u002Fp\u003E\r\n\r\n\u003Cul class=\"\"\u003E\r\n \t\u003Cli id=\"0d8b\" class=\"mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj pa pb pc bk\" data-selectable-paragraph=\"\"\u003ENomes e sobrenomes;\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"6fbd\" class=\"mm mn fq mo b mp pd mr ms mt pe mv mw mx pf mz na nb pg nd ne nf ph nh ni nj pa pb pc bk\" data-selectable-paragraph=\"\"\u003EEndereços completos (ruas, cidades, estados e até CEPs;.\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"57db\" class=\"mm mn fq mo b mp pd mr ms mt pe mv mw mx pf mz na nb pg nd ne nf ph nh ni nj pa pb pc bk\" data-selectable-paragraph=\"\"\u003EE-mails, números de telefone e até mesmo textos aleatórios para preencher campos de formulário.\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"8d4d\" class=\"mm mn fq mo b mp pd mr ms mt pe mv mw mx pf mz na nb pg nd ne nf ph nh ni nj pa pb pc bk\" data-selectable-paragraph=\"\"\u003EEtc.\u003C\u002Fli\u003E\r\n\u003C\u002Ful\u003E\r\n\u003Cp id=\"3c62\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EAlém disso, o Faker.js suporta diversos idiomas, incluindo o português do Brasil, o que torna os dados gerados ainda mais contextualizados e realistas.\u003C\u002Fp\u003E\r\n\u003Cp id=\"1257\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EA melhor forma de entender todas as suas possibilidades é visitando a sua documentação. Lá, encontramos uma infinidade de categorias que vão desde pessoas, até números, locais, internet, e assim por diante.\u003C\u002Fp\u003E\r\n\r\n\u003C\u002Fdiv\u003E\r\n\u003C\u002Fdiv\u003E\r\n\u003Cdiv class=\"ln\"\u003E\r\n\u003Cdiv class=\"ab cb\"\u003E\r\n\u003Cdiv class=\"lo lp lq lr ls lt cf lu cg lv ci bh\"\u003E\r\n\u003Cfigure class=\"on oo op oq or ln me mf paragraph-image\"\u003E\r\n\u003Cdiv class=\"mg mh ed mi bh mj\" tabindex=\"0\" role=\"button\"\u003E\r\n\u003Cdiv class=\"lw lx aki\"\u003E\u003Cpicture\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002Fformat:webp\u002F1*d0lduGgrDc1cP3vyL7UKDQ.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002Fformat:webp\u002F1*d0lduGgrDc1cP3vyL7UKDQ.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002Fformat:webp\u002F1*d0lduGgrDc1cP3vyL7UKDQ.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002Fformat:webp\u002F1*d0lduGgrDc1cP3vyL7UKDQ.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002Fformat:webp\u002F1*d0lduGgrDc1cP3vyL7UKDQ.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002Fformat:webp\u002F1*d0lduGgrDc1cP3vyL7UKDQ.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:2000\u002Fformat:webp\u002F1*d0lduGgrDc1cP3vyL7UKDQ.png 2000w\" type=\"image\u002Fwebp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px\" \u002F\u003E\u003Csource srcset=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:640\u002F1*d0lduGgrDc1cP3vyL7UKDQ.png 640w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:720\u002F1*d0lduGgrDc1cP3vyL7UKDQ.png 720w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:750\u002F1*d0lduGgrDc1cP3vyL7UKDQ.png 750w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:786\u002F1*d0lduGgrDc1cP3vyL7UKDQ.png 786w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:828\u002F1*d0lduGgrDc1cP3vyL7UKDQ.png 828w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1100\u002F1*d0lduGgrDc1cP3vyL7UKDQ.png 1100w, https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:2000\u002F1*d0lduGgrDc1cP3vyL7UKDQ.png 2000w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px\" data-testid=\"og\" \u002F\u003E\u003Cimg class=\"bh mk ml c\" role=\"presentation\" src=\"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1000\u002F1*d0lduGgrDc1cP3vyL7UKDQ.png\" alt=\"\" width=\"1000\" height=\"673\" \u002F\u003E\u003C\u002Fpicture\u003E\u003C\u002Fdiv\u003E\r\n\u003C\u002Fdiv\u003E\r\n\u003Cfigcaption class=\"akj rr akk lw lx akl akm bf b bg z dx\" data-selectable-paragraph=\"\"\u003EDocumentação da biblioteca Faker.js\u003C\u002Ffigcaption\u003E\u003C\u002Ffigure\u003E\r\n\u003C\u002Fdiv\u003E\r\n\u003C\u002Fdiv\u003E\r\n\u003C\u002Fdiv\u003E\r\n\u003Cdiv class=\"ab cb\"\u003E\r\n\u003Cdiv class=\"ci bh ev ew ex ey\"\u003E\r\n\u003Cp id=\"29ed\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EO primeiro passo para usá-lo é instalá-lo. Podemos fazer isso facilmente com o comando:\u003C\u002Fp\u003E\r\n\r\n\u003Cpre class=\"on oo op oq or akn oz ako bp akp bb bk\"\u003E\u003Ccode\u003E\u003Cspan id=\"fecc\" class=\"akq nl fq oz b bg akr aks l akt aku\" data-selectable-paragraph=\"\"\u003Enpm install @faker-js\u002Ffaker\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\r\n\u003Cp id=\"6410\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003ENo arquivo em que você deseja usar o faker, faça o seguinte import:\u003C\u002Fp\u003E\r\n\r\n\u003Cpre class=\"on oo op oq or akn oz ako bp akp bb bk\"\u003E\u003Ccode\u003E\u003Cspan id=\"4896\" class=\"akq nl fq oz b bg akr aks l akt aku\" data-selectable-paragraph=\"\"\u003E\u003Cspan class=\"hljs-keyword\"\u003Eimport\u003C\u002Fspan\u003E { faker } \u003Cspan class=\"hljs-keyword\"\u003Efrom\u003C\u002Fspan\u003E \u003Cspan class=\"hljs-string\"\u003E\"@faker-js\u002Ffaker\"\u003C\u002Fspan\u003E;\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\r\n\u003Cp id=\"5657\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EE pronto! Já conseguimos fazer uso das diversas possibilidades que a API nos oferece, como por exemplo, construir os dados de uma pessoa:\u003C\u002Fp\u003E\r\n\r\n\u003C\u002Fdiv\u003E\r\n\u003C\u002Fdiv\u003E\r\n\u003Cpre\u003E\u003Ccode class=\"line-numbers language-javascript\"\u003Eimport { faker } from \"@faker-js\u002Ffaker\";\r\n\r\nconst person = {\r\n firstName: faker.person.firstName(),\r\n lastName: faker.person.lastName(),\r\n email: faker.internet.email(),\r\n phone: faker.phone.number(),\r\n address: faker.location.streetAddress()\r\n}\r\n\r\nconsole.log(person);\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\r\n\u003Cdiv class=\"ab cb\"\u003E\r\n\u003Cdiv class=\"ci bh ev ew ex ey\"\u003E\r\n\u003Cpre class=\"on oo op oq or akn oz ako bp akp bb bk\"\u003E\u003Cspan id=\"3efb\" class=\"akq nl fq oz b bg akr aks l akt aku\" data-selectable-paragraph=\"\"\u003E\r\n\u003C\u002Fspan\u003EToda vez que rodamos este código, obtemos informações completamente diferentes!\u003C\u002Fpre\u003E\r\n\u003Ch3 id=\"34a6\" class=\"nk nl fq bf nm nn no np nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of og oh bk\"\u003EVersão em vídeo\u003C\u002Fh3\u003E\r\n\u003Cp id=\"11e3\" class=\"pw-post-body-paragraph mm mn fq mo b mp oi mr ms mt oj mv mw mx ok mz na nb ol nd ne nf om nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EConfira a versão em vídeo desse artigo!\u003C\u002Fp\u003E\r\n\r\n\u003Cfigure class=\"on oo op oq or ln\"\u003E\r\n\u003Cdiv class=\"os ia l ed\"\u003E\r\n\u003Cdiv class=\"ot ou l\"\u003E\u003Ciframe class=\"em n fe dz bh\" title=\"Como usar o Faker.js para gerar dados falsos (mas realistas) em JavaScript\" src=\"https:\u002F\u002Fcdn.embedly.com\u002Fwidgets\u002Fmedia.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FBKE9pfIdPbI%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DBKE9pfIdPbI&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FBKE9pfIdPbI%2Fhqdefault.jpg&type=text%2Fhtml&schema=youtube\" width=\"854\" height=\"480\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\" data-mce-fragment=\"1\"\u003E\u003C\u002Fiframe\u003E\u003C\u002Fdiv\u003E\r\n\u003C\u002Fdiv\u003E\u003C\u002Ffigure\u003E\r\n\u003Cp id=\"6512\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003E\u003C\u002Fp\u003E\r\n\r\n\u003C\u002Fdiv\u003E\r\n\u003C\u002Fdiv\u003E","excerpt":"\u003Cp\u003ENo desenvolvimento de software, testar… É aí que entra o Faker.js, uma poderosa biblioteca para gerar dados fictícios de maneira rápida e eficiente.\u003C\u002Fp\u003E\n","link":"https:\u002F\u002Fimasters.com.br\u002Fjavascript\u002Fcomo-usar-faker-js-para-gerar-dados-falsos-mas-realistas-em-javascript","date":"11 mar, 2025","thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2025\u002F03\u002F25130509\u002FJavaScript-3.jpg","externalMention":"","author":{"id":"144418","thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2018\u002F05\u002F30171243\u002Fdiego-pinho.jpg","name":"Diego Pinho","description":"Bacharel em Ciência da Computação pela PUCSP e MBA em Gestão da Tecnologia da Informação na FIAP. Autor do livro ECMAScript 6 - Entre de cabeça no futuro do JavaScript. Cofundador da Code Prestige e Community Manager no iMasters.","slug":"diegopinho","url":"https:\u002F\u002Fimasters.com.br\u002Fperfil\u002Fdiegopinho","registered":"2013-08-13 18:00:53","social":{"linkedin":null,"youtube":null,"facebook":"","twitter":"https:\u002F\u002Ftwitter.com\u002FDiegoPinho","instagram":null,"github":null,"url":"http:\u002F\u002Fwww.diegopinho.com.br","mail":"diego.pinho@imasters.com.br"},"articles_count":113,"views_count":1276900,"certifications":null,"conquests":null,"office":null},"categories":[{"title":"JavaScript","slug":"javascript","id":7220,"link":"https:\u002F\u002Fimasters.com.br\u002Fjavascript"}],"tags":[{"title":"dados falsos","slug":"dados-falsos","id":9191,"link":"https:\u002F\u002Fimasters.com.br\u002Fdados-falsos"},{"title":"Faker","slug":"faker","id":6659,"link":"https:\u002F\u002Fimasters.com.br\u002Ffaker"},{"title":"javascript","slug":"javascript-2","id":214,"link":"https:\u002F\u002Fimasters.com.br\u002Fjavascript-2"}],"relateds":[],"seo":[],"type":"post"},{"id":162956,"title":"5 serviços gratuitos na cloud para bancos de dados Postgres","content":"\u003Cp id=\"3147\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EUma das partes mais legais de codar uma aplicação é disponibilizá-la para que outras pessoas possam usá-la.\u003C\u002Fp\u003E\r\n\u003Cp id=\"d2f3\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003ESó que se quisermos fazer isso, geralmente temos com arcar com as consequências financeiras… e nem sempre essa é uma opção, principalmente se estamos começando na área e não temos nenhum tipo de orçamento. 💸\u003C\u002Fp\u003E\r\n\u003Cp id=\"95a0\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EIsso acontece tanto para o front-end, back-end e também o banco de dados!\u003C\u002Fp\u003E\r\n\u003Cp id=\"61c7\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EPara conseguir expor nossos projetos pessoais, MVPs e até mesmo projetos para processos seletivos de forma gratuita, vamos aprender algumas opções de armazenamento para bancos de dados do tipo Postgres.\u003C\u002Fp\u003E\r\n\u003Cp id=\"dd94\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EMas antes de começarmos, vale ressaltar que qualquer tipo de serviço gratuito tem suas limitações. Ou seja, se você quiser\u002Fprecisar de um serviço mais robusto, vai precisar arranjar uma grana. Não tem jeito.\u003C\u002Fp\u003E\r\n\u003Cp id=\"6e76\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EMas não se preocute, temos algumas opções bem legais. Vamos começar.\u003C\u002Fp\u003E\r\n\r\n\u003Ch2\u003E5 serviços gratuitos na cloud para bancos de dados Postgres\u003C\u002Fh2\u003E\r\n\u003Ch3 id=\"f5d7\" class=\"nk nl fq bf nm nn no np nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of og oh bk\"\u003E\u003Cspan style=\"font-size: 14pt;\"\u003EOpção 1 — ElephantSQL\u003C\u002Fspan\u003E\u003C\u002Fh3\u003E\r\n\u003Cp id=\"3a95\" class=\"pw-post-body-paragraph mm mn fq mo b mp oi mr ms mt oj mv mw mx ok mz na nb ol nd ne nf om nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003ENossa primeira opção é o \u003Cstrong class=\"mo fr\"\u003EElephantSQL\u003C\u002Fstrong\u003E.\u003C\u002Fp\u003E\r\n\u003Cp id=\"af08\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003E\u003Ca class=\"af ov\" href=\"https:\u002F\u002Fwww.elephantsql.com\u002F\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003EElephantSQL — PostgreSQL as a Service\u003C\u002Fa\u003E\u003C\u002Fp\u003E\r\n\u003Cp id=\"d4bf\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EEssa é uma das minhas opções favoritas, mas está com data de validade.\u003C\u002Fp\u003E\r\n\u003Cp id=\"dc66\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003ENo primeiro semestre deste ano (2024) eles anunciaram que o serviço será extinto (EOL ⇒ end of life) a partir do início de 2025 (27 de janeiro). O que é uma pena, pois o serviço é muito bom.\u003C\u002Fp\u003E\r\n\u003Cp id=\"5240\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EPara usar o serviço, basta criar uma conta usando e-mail\u002Fsenha, Gmail e\u002Fou GitHub.\u003C\u002Fp\u003E\r\n\u003Cp id=\"7aff\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EO serviço permite criar inúmeras instâncias, sendo a gratuita chamada de \u003Ccode class=\"cx ow ox oy oz b\"\u003ETiny Turtle\u003C\u002Fcode\u003E.\u003C\u002Fp\u003E\r\n\u003Cp id=\"024f\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003ENeste tipo de instância, podemos:\u003C\u002Fp\u003E\r\n\r\n\u003Cul class=\"\"\u003E\r\n \t\u003Cli id=\"4ce1\" class=\"mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj pa pb pc bk\" data-selectable-paragraph=\"\"\u003ETer até 20mb de dados;\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"8ef4\" class=\"mm mn fq mo b mp pd mr ms mt pe mv mw mx pf mz na nb pg nd ne nf ph nh ni nj pa pb pc bk\" data-selectable-paragraph=\"\"\u003ECinco conexões simultâneas.\u003C\u002Fli\u003E\r\n\u003C\u002Ful\u003E\r\n\u003Cp id=\"38bb\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EUm fato interessante é que o serviço oferece bancos de dados em São Paulo, o que para nós brasileiros é bem legal, já que a conexão tende a ser mais rápida!\u003C\u002Fp\u003E\r\n\r\n\u003Ch3 id=\"a8fe\" class=\"nk nl fq bf nm nn no np nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of og oh bk\"\u003E\u003Cspan style=\"font-size: 18pt;\"\u003EOpção 2 — Aiven\u003C\u002Fspan\u003E\u003C\u002Fh3\u003E\r\n\u003Cp id=\"dbcf\" class=\"pw-post-body-paragraph mm mn fq mo b mp oi mr ms mt oj mv mw mx ok mz na nb ol nd ne nf om nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003ENossa segunda opção é a recomendação do próprio ElephantSQL, o \u003Ca class=\"af ov\" href=\"https:\u002F\u002Faiven.io\u002Fpostgresql\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003E\u003Cstrong class=\"mo fr\"\u003EAiven\u003C\u002Fstrong\u003E\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\r\n\u003Cp id=\"f763\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003E\u003Ca class=\"af ov\" href=\"https:\u002F\u002Faiven.io\u002Fpostgresql#pricing\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003EManaged PostgreSQL service | Aiven\u003C\u002Fa\u003E\u003C\u002Fp\u003E\r\n\u003Cp id=\"dd5e\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EMuitos serviços gratuitos exigem o cadastro de um cartão de crédito, felizmente, esse não é o caso (e eles fazem questão de deixar isso bem explícito).\u003C\u002Fp\u003E\r\n\u003Cp id=\"09ca\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EPrimeiramente, você precisará criar uma conta usando e-mail\u002Fsenha, Gmail, GitHub ou Microsoft.\u003C\u002Fp\u003E\r\n\u003Cp id=\"e66d\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EAo criar uma nova instância, use a opção \u003Ccode class=\"cx ow ox oy oz b\"\u003EFREE\u003C\u002Fcode\u003E e não \u003Ccode class=\"cx ow ox oy oz b\"\u003ETRIAL\u003C\u002Fcode\u003E.\u003C\u002Fp\u003E\r\n\u003Cp id=\"042b\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EVocê pode selecionar seu provedor na nuvem (AWS ou Digital Ocean) assim como a localização (infelizmente não há nada na América do Sul).\u003C\u002Fp\u003E\r\n\u003Cp id=\"c659\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EA máquina pode variar de acordo com o provedor, mas no geral você terá a seguinte configuração:\u003C\u002Fp\u003E\r\n\r\n\u003Cul class=\"\"\u003E\r\n \t\u003Cli id=\"f552\" class=\"mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj pa pb pc bk\" data-selectable-paragraph=\"\"\u003E2 CPU;\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"412e\" class=\"mm mn fq mo b mp pd mr ms mt pe mv mw mx pf mz na nb pg nd ne nf ph nh ni nj pa pb pc bk\" data-selectable-paragraph=\"\"\u003E1 GB RAM;\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"e597\" class=\"mm mn fq mo b mp pd mr ms mt pe mv mw mx pf mz na nb pg nd ne nf ph nh ni nj pa pb pc bk\" data-selectable-paragraph=\"\"\u003E5 GB de armazenamento;\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"51c3\" class=\"mm mn fq mo b mp pd mr ms mt pe mv mw mx pf mz na nb pg nd ne nf ph nh ni nj pa pb pc bk\" data-selectable-paragraph=\"\"\u003EBackups (disaster recovery).\u003C\u002Fli\u003E\r\n\u003C\u002Ful\u003E\r\n\u003Cp id=\"7cad\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EO bacana desta ferramenta é que ela te fornecerá uma série de dados sobre o uso do banco, para que você possa monitorá-lo. Coisas como: logs, métricas, conexões, etc.\u003C\u002Fp\u003E\r\n\r\n\u003Ch3 id=\"aed9\" class=\"nk nl fq bf nm nn no np nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of og oh bk\"\u003E\u003Cspan style=\"font-size: 18pt;\"\u003EOpção 3 — Render\u003C\u002Fspan\u003E\u003C\u002Fh3\u003E\r\n\u003Cp id=\"7dce\" class=\"pw-post-body-paragraph mm mn fq mo b mp oi mr ms mt oj mv mw mx ok mz na nb ol nd ne nf om nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003ENossa terceira opção pode ser interessante para já ficar vinculada ao seu back-end, ou seja, subir os dois no mesmo serviço. Estou falando do \u003Cstrong class=\"mo fr\"\u003ERender\u003C\u002Fstrong\u003E.\u003C\u002Fp\u003E\r\n\u003Cp id=\"0a50\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003E\u003Ca class=\"af ov\" href=\"https:\u002F\u002Frender.com\u002F\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003ECloud Application Hosting for Developers | Render\u003C\u002Fa\u003E\u003C\u002Fp\u003E\r\n\u003Cp id=\"c91d\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EAssim como em todos os outros serviços desta lista, você precisará criar um conta. Aqui, além do e-mail\u002Fsenha, você pode associar sua conta do Github, Gmail, BitBucket ou Gitlab.\u003C\u002Fp\u003E\r\n\u003Cp id=\"f29d\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003ENo Render, temos uma categoria de instância que ele chama de \u003Ccode class=\"cx ow ox oy oz b\"\u003EHobby Projects\u003C\u002Fcode\u003E.\u003C\u002Fp\u003E\r\n\u003Cp id=\"e090\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EEste tipo de instância é gratuita e nos fornece a seguinte configuração:\u003C\u002Fp\u003E\r\n\r\n\u003Cul class=\"\"\u003E\r\n \t\u003Cli id=\"40af\" class=\"mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj pa pb pc bk\" data-selectable-paragraph=\"\"\u003E256 MB RAM;\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"29eb\" class=\"mm mn fq mo b mp pd mr ms mt pe mv mw mx pf mz na nb pg nd ne nf ph nh ni nj pa pb pc bk\" data-selectable-paragraph=\"\"\u003E0.1 CPU;\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"e93d\" class=\"mm mn fq mo b mp pd mr ms mt pe mv mw mx pf mz na nb pg nd ne nf ph nh ni nj pa pb pc bk\" data-selectable-paragraph=\"\"\u003E1 GB de armazenamento.\u003C\u002Fli\u003E\r\n\u003C\u002Ful\u003E\r\n\u003Cp id=\"dba5\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EFunciona muito bem, mas existem algumas regras importantes para o uso destes bancos:\u003C\u002Fp\u003E\r\n\r\n\u003Col class=\"\"\u003E\r\n \t\u003Cli id=\"7ef0\" class=\"mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj pi pb pc bk\" data-selectable-paragraph=\"\"\u003EVocê só pode ter um banco de dados ativado por vez (usuário e\u002Fou time);\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"06f0\" class=\"mm mn fq mo b mp pd mr ms mt pe mv mw mx pf mz na nb pg nd ne nf ph nh ni nj pi pb pc bk\" data-selectable-paragraph=\"\"\u003EOs bancos gratuitos são removidos após 30 dias;\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"f1ec\" class=\"mm mn fq mo b mp pd mr ms mt pe mv mw mx pf mz na nb pg nd ne nf ph nh ni nj pi pb pc bk\" data-selectable-paragraph=\"\"\u003EO banco é suspenso depois de 72 horas de inatividade;\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"6d17\" class=\"mm mn fq mo b mp pd mr ms mt pe mv mw mx pf mz na nb pg nd ne nf ph nh ni nj pi pb pc bk\" data-selectable-paragraph=\"\"\u003ENão há nenhum tipo de backup.\u003C\u002Fli\u003E\r\n\u003C\u002Fol\u003E\r\n\u003Cp id=\"f545\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EAs regras parecem bem rígidas, mas para projetos pequenos e coisas do tipo funciona muito bem.\u003C\u002Fp\u003E\r\n\r\n\u003Ch3 id=\"618b\" class=\"nk nl fq bf nm nn no np nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of og oh bk\"\u003E\u003Cspan style=\"font-size: 18pt;\"\u003EOpção 4 — Neon\u003C\u002Fspan\u003E\u003C\u002Fh3\u003E\r\n\u003Cp id=\"6771\" class=\"pw-post-body-paragraph mm mn fq mo b mp oi mr ms mt oj mv mw mx ok mz na nb ol nd ne nf om nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EPara nossa quarta opção, temos um outro serviço bem interessante focado em banco de dados, o \u003Cstrong class=\"mo fr\"\u003ENeon\u003C\u002Fstrong\u003E.\u003C\u002Fp\u003E\r\n\u003Cp id=\"1d20\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003E\u003Ca class=\"af ov\" href=\"https:\u002F\u002Fneon.tech\u002F\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003ENeon Serverless Postgres — Ship faster\u003C\u002Fa\u003E\u003C\u002Fp\u003E\r\n\u003Cp id=\"39f6\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EPrimeiramente você criará sua conta usando e-mail\u002Fsenha, GitHub, Gmail ou Hasura (eu confesso que nem conheço esse serviço, mas está disponível!)\u003C\u002Fp\u003E\r\n\u003Cp id=\"70ce\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EDiferentemente dos outros serviços, o Neon tem um diferencial: ele permite criar até 10 branches no banco. Além disso, possui as seguintes configurações:\u003C\u002Fp\u003E\r\n\r\n\u003Cul class=\"\"\u003E\r\n \t\u003Cli id=\"ab0d\" class=\"mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj pa pb pc bk\" data-selectable-paragraph=\"\"\u003E1 CPU compartilhada;\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"009c\" class=\"mm mn fq mo b mp pd mr ms mt pe mv mw mx pf mz na nb pg nd ne nf ph nh ni nj pa pb pc bk\" data-selectable-paragraph=\"\"\u003E0.5 Gb de armazenamento;\u003C\u002Fli\u003E\r\n \t\u003Cli id=\"ef38\" class=\"mm mn fq mo b mp pd mr ms mt pe mv mw mx pf mz na nb pg nd ne nf ph nh ni nj pa pb pc bk\" data-selectable-paragraph=\"\"\u003E1 Gb de memória RAM.\u003C\u002Fli\u003E\r\n\u003C\u002Ful\u003E\r\n\u003Cp id=\"855c\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EEm termos de região, a mais próxima será no oeste dos estados unidos (us-west).\u003C\u002Fp\u003E\r\n\u003Cp id=\"9103\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EPodemos ter um projeto cadastrados e inúmeros bancos de dados associados a ele.\u003C\u002Fp\u003E\r\n\r\n\u003Ch3 id=\"cc38\" class=\"nk nl fq bf nm nn no np nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of og oh bk\"\u003E\u003Cspan style=\"font-size: 18pt;\"\u003EOpção 5 — Supabase\u003C\u002Fspan\u003E\u003C\u002Fh3\u003E\r\n\u003Cp id=\"8724\" class=\"pw-post-body-paragraph mm mn fq mo b mp oi mr ms mt oj mv mw mx ok mz na nb ol nd ne nf om nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003ENossa última opção é bem famosa para quem procura uma plataforma robusta para subir os seus projetos na nuvem. Esta solução é uma versão de código aberta do Firebase. Este é o \u003Cstrong class=\"mo fr\"\u003ESupabase\u003C\u002Fstrong\u003E.\u003C\u002Fp\u003E\r\n\u003Cp id=\"8714\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003E\u003Ca class=\"af ov\" href=\"https:\u002F\u002Fsupabase.com\u002F\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003ESupabase | The Open Source Firebase Alternative\u003C\u002Fa\u003E\u003C\u002Fp\u003E\r\n\u003Cp id=\"539f\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EDentro da plataforma podemos ter até dois bancos de dados Postgres simultaneamente.\u003C\u002Fp\u003E\r\n\u003Cp id=\"0182\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EOs bancos são pausados depois de 1 semana de inatividade.\u003C\u002Fp\u003E\r\n\u003Cp id=\"5d7f\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EA plataforma oferece uma série de controles interessantes e algumas ferramentas: como a de visualização de schemas e perfomance de queries, por exemplo.\u003C\u002Fp\u003E\r\n\u003Cp id=\"2017\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EAlém disso, o site vem recheado de biblitoecas cliente para que você possa se conectar ao serviço, além exemplos de projetos em várias tecnologias diferentes: Svelte, NestJS, Next.js, React, etc.\u003C\u002Fp\u003E\r\n\u003Cp id=\"541c\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003E—\u003C\u002Fp\u003E\r\n\r\n\u003Ch3 id=\"3137\" class=\"nk nl fq bf nm nn no np nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of og oh bk\"\u003ERepositório\u003C\u002Fh3\u003E\r\n\u003Cp id=\"48f2\" class=\"pw-post-body-paragraph mm mn fq mo b mp oi mr ms mt oj mv mw mx ok mz na nb ol nd ne nf om nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003E\u003Ca class=\"af ov\" href=\"https:\u002F\u002Fgithub.com\u002FProfessor-DiegoPinho\u002Fghost-elements-loader\" target=\"_blank\" rel=\"noopener ugc nofollow noreferrer\"\u003Ehttps:\u002F\u002Fgithub.com\u002FProfessor-DiegoPinho\u002Fghost-elements-loader\u003C\u002Fa\u003E\u003C\u002Fp\u003E\r\n\u003Cp id=\"541c\" class=\"pw-post-body-paragraph mm mn fq mo b mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003E—\u003C\u002Fp\u003E\r\n\r\n\u003Ch3 id=\"78cc\" class=\"nk nl fq bf nm nn no np nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of og oh bk\"\u003E\u003Cspan style=\"font-size: 14pt;\"\u003EVersão em vídeo\u003C\u002Fspan\u003E\u003C\u002Fh3\u003E\r\n\u003Cp id=\"744e\" class=\"pw-post-body-paragraph mm mn fq mo b mp oi mr ms mt oj mv mw mx ok mz na nb ol nd ne nf om nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003EConfira a versão em vídeo desse artigo!\u003C\u002Fp\u003E\r\n\r\n\u003Cfigure class=\"on oo op oq or ln\"\u003E\r\n\u003Cdiv class=\"os ia l ed\"\u003E\r\n\u003Cdiv class=\"ot ou l\"\u003E\u003Ciframe class=\"em n fe dz bh\" title=\"5 Alternativas Gratuitas para Postgres na Nuvem\" src=\"https:\u002F\u002Fcdn.embedly.com\u002Fwidgets\u002Fmedia.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FNKXJikHu2dQ%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DNKXJikHu2dQ&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FNKXJikHu2dQ%2Fhqdefault.jpg&type=text%2Fhtml&schema=youtube\" width=\"854\" height=\"480\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\" data-mce-fragment=\"1\"\u003E\u003C\u002Fiframe\u003E\u003C\u002Fdiv\u003E\r\n\u003C\u002Fdiv\u003E\u003C\u002Ffigure\u003E\r\n\u003Cp id=\"48f2\" class=\"pw-post-body-paragraph mm mn fq mo b mp oi mr ms mt oj mv mw mx ok mz na nb ol nd ne nf om nh ni nj fj bk\" data-selectable-paragraph=\"\"\u003E\u003C\u002Fp\u003E","excerpt":"\u003Cp\u003EPara conseguir expor nossos projetos pessoais, MVPs e até mesmo projetos para processos seletivos de forma gratuita, vamos … dados do tipo Postgres.\u003C\u002Fp\u003E\n","link":"https:\u002F\u002Fimasters.com.br\u002Fpostgresql\u002F5-servicos-gratuitos-na-cloud-para-bancos-de-dados-postgres","date":"27 fev, 2025","thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2025\u002F02\u002F25121614\u002FPostgres.jpg","externalMention":"","author":{"id":"144418","thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2018\u002F05\u002F30171243\u002Fdiego-pinho.jpg","name":"Diego Pinho","description":"Bacharel em Ciência da Computação pela PUCSP e MBA em Gestão da Tecnologia da Informação na FIAP. Autor do livro ECMAScript 6 - Entre de cabeça no futuro do JavaScript. Cofundador da Code Prestige e Community Manager no iMasters.","slug":"diegopinho","url":"https:\u002F\u002Fimasters.com.br\u002Fperfil\u002Fdiegopinho","registered":"2013-08-13 18:00:53","social":{"linkedin":null,"youtube":null,"facebook":"","twitter":"https:\u002F\u002Ftwitter.com\u002FDiegoPinho","instagram":null,"github":null,"url":"http:\u002F\u002Fwww.diegopinho.com.br","mail":"diego.pinho@imasters.com.br"},"articles_count":113,"views_count":1276900,"certifications":null,"conquests":null,"office":null},"categories":[{"title":"Cloud Computing","slug":"cloud","id":7276,"link":"https:\u002F\u002Fimasters.com.br\u002Fcloud"},{"title":"PostgreSQL","slug":"postgresql","id":7213,"link":"https:\u002F\u002Fimasters.com.br\u002Fpostgresql"}],"tags":[{"title":"Aiven","slug":"aiven","id":9187,"link":"https:\u002F\u002Fimasters.com.br\u002Faiven"},{"title":"bancos de dados","slug":"bancos-de-dados","id":6563,"link":"https:\u002F\u002Fimasters.com.br\u002Fbancos-de-dados"},{"title":"ElephantSQL","slug":"elephantsql","id":9188,"link":"https:\u002F\u002Fimasters.com.br\u002Felephantsql"},{"title":"Neon","slug":"neon","id":9185,"link":"https:\u002F\u002Fimasters.com.br\u002Fneon"},{"title":"postgres","slug":"postgres","id":5910,"link":"https:\u002F\u002Fimasters.com.br\u002Fpostgres"},{"title":"Render","slug":"render","id":9186,"link":"https:\u002F\u002Fimasters.com.br\u002Frender"},{"title":"Supabase","slug":"supabase","id":8827,"link":"https:\u002F\u002Fimasters.com.br\u002Fsupabase"}],"relateds":[],"seo":[],"type":"post"},{"id":161898,"title":"Alertas bonitos, responsivos e customizados com o SweetAlert2","content":"\u003Cspan style=\"font-weight: 400;\"\u003EAlertas bonitos, responsivos e customizados com o \u003Cstrong\u003ESweetAlert2\u003C\u002Fstrong\u003E\u003C\u002Fspan\u003E\r\n\r\n\u003Cspan style=\"font-weight: 400;\"\u003EQuando estamos falando de desenvolvimento web, há praticamente duas coisas que todo(a) programador(a) provavelmente já fez:\u003C\u002Fspan\u003E\r\n\u003Cul\u003E\r\n \t\u003Cli style=\"font-weight: 400;\" aria-level=\"1\"\u003E\u003Cspan style=\"font-weight: 400;\"\u003EUsar \u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003Econsole.log()\u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003E para debugar o código;\u003C\u002Fspan\u003E\u003C\u002Fli\u003E\r\n \t\u003Cli style=\"font-weight: 400;\" aria-level=\"1\"\u003E\u003Cspan style=\"font-weight: 400;\"\u003EUsar o \u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003Ealert()\u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003E para exibir mensagens na tela.\u003C\u002Fspan\u003E\u003C\u002Fli\u003E\r\n\u003C\u002Ful\u003E\r\n\u003Cspan style=\"font-weight: 400;\"\u003EApesar de ambos funcionarem bem e nos ajudarem a desenvolver nossos sistemas web, elas são ferramentas inadequadas para usarmos como forma de se comunicar com os usuários.\u003C\u002Fspan\u003E\r\n\u003Ch2\u003E\u003Cspan style=\"font-weight: 400;\"\u003E\u003Cstrong\u003ESweetAlert2\u003C\u002Fstrong\u003E\u003C\u002Fspan\u003E\u003C\u002Fh2\u003E\r\n\u003Cspan style=\"font-weight: 400;\"\u003EÉ por esse motivo que quero te apresentar o \u003C\u002Fspan\u003E\u003Ca href=\"https:\u002F\u002Fsweetalert2.github.io\u002F\"\u003E\u003Cb\u003ESweetAlert2\u003C\u002Fb\u003E\u003C\u002Fa\u003E\u003Cspan style=\"font-weight: 400;\"\u003E, uma biblioteca JavaScript que nos ajuda na criação de alertas que sejam bonitos, responsivos e customizados, tudo isso sem nenhuma outra dependência! Eu tenho quase certeza que você já deve ter visto a janelinha dele em algum site por aí mesmo sem saber que era gerada por essa biblioteca 👀\u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003E\r\n\u003C\u002Fspan\u003E\r\n\r\n\u003Ca href=\"https:\u002F\u002Fadmin.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2024\u002F09\u002FPinho1.jpg\"\u003E\u003Cimg class=\"alignnone size-full wp-image-161899\" src=\"https:\u002F\u002Fadmin.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2024\u002F09\u002FPinho1.jpg\" alt=\"\" width=\"727\" height=\"483\" \u002F\u003E\u003C\u002Fa\u003E\r\n\r\n\u003Cspan style=\"font-weight: 400;\"\u003EAlém das instruções que daremos abaixo, você também pode acompanhar todos os passos que serão feitos assistindo o vídeo abaixo:\u003C\u002Fspan\u003E\r\n\r\n\u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=fm4sUQyep-o\"\u003E\u003Cspan style=\"font-weight: 400;\" data-rich-links=\"{"fple-t":"Alertas bonitos e responsivos com o SweetAlert 2","fple-u":"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=fm4sUQyep-o","fple-mt":null,"type":"first-party-link"}\"\u003EAlertas bonitos e responsivos com o SweetAlert 2\u003C\u002Fspan\u003E\u003C\u002Fa\u003E\r\n\r\n\u003Cspan style=\"font-weight: 400;\"\u003E---\u003C\u002Fspan\u003E\r\n\u003Ch3\u003E\u003Cspan style=\"font-weight: 400;\"\u003E\u003Cstrong\u003ESweetAlert2 - Uso simples\u003C\u002Fstrong\u003E\u003C\u002Fspan\u003E\u003C\u002Fh3\u003E\r\n\u003Cspan style=\"font-weight: 400;\"\u003EO seu uso é super simples. Primeiramente, é necessário importá-lo para o seu projeto:\u003C\u002Fspan\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003Enpm install sweetalert2 # npm\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E# ou via cdn\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E<script src=\"<https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fsweetalert2@11>\"><\u002Fscript>\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Cspan style=\"font-weight: 400;\"\u003EUma vez importado, utilizamos o objeto \u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003ESwal\u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003E para disparar os alertas. O alerta mais simples é criado apenas passando como parâmetro a mensagem que desejamos exibir, como no exemplo a seguir, onde apenas exibimos a mensagem “Olá mundo!”. Como neste exemplo aqui:\u003C\u002Fspan\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E<button>Olá mundo!<\u002Fbutton>\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E const button = document.getElementsByTagName(\"button\")[0];\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003Ebutton.addEventListener(\"click\", () => {\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E Swal.fire(\"Hello World!\");\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E})\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Cspan style=\"font-weight: 400;\"\u003EPara tornar as coisas mais interessantes, podemos utilizar alguns dos alertas padrões, como no exemplo abaixo, onde exibimos uma mensagem de erro e de sucesso apenas especificando o seu tipo (bem semelhante ao que temos no bootstrap) na chamada do método:\u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003E\r\n\u003C\u002Fspan\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E<button id=\"success\">Sucesso<\u002Fbutton>\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E<button id=\"error\">Erro<\u002Fbutton>\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E const successBtn = document.getElementById(\"success\");\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003Econst errorBtn = document.getElementById(\"error\");\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003EsuccessBtn.addEventListener(\"click\", () => {\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E Swal.fire(\"Boa!\", \"Deu tudo certo!\", \"success\");\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E});\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003EerrorBtn.addEventListener(\"click\", () => {\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E Swal.fire(\"Oh no...\", \"Algo deu errado!\", \"error\");\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E});\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\u003Ch3\u003EOutras possibilidades\u003C\u002Fh3\u003E\r\n\u003Cspan style=\"font-weight: 400;\"\u003EO Sweet Alert 2 é capaz de muito mais. No exemplo a seguir, criamos um alerta com diversas configurações, incluindo título, texto, tipo, opções de exibição para botões de confirmação e cancelamento, além de ações personalizadas para cada resposta do usuário:\u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003E\r\n\u003C\u002Fspan\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E<button>Exibir mensagem<\u002Fbutton>\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E const button = document.getElementsByTagName(\"button\")[0];\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003Ebutton.addEventListener(\"click\", () => {\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E Swal.fire({\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E title: \"Você está certo disso?\",\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E text: \"Esta pergunta vale um milhão de reais!\",\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E type: \"warning\",\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E showCancelButton: true,\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E confirmButtonColor: \"#3085d6\",\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E cancelButtonColor: \"#d33\",\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E confirmButtonText: \"Sim, tenho certeza!\",\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E cancelButtonText: \"Melhor eu parar...\"\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E }).then((result) => {\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E if (result.value) {\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E Swal.fire(\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E \"Parabéns!\",\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E \"Você acertou e ganhou um milhão de reais!\",\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E \"success\"\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E )\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E }\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E })\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E});\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Cspan style=\"font-weight: 400;\"\u003EBem bacana, né? E a verdade é que as possibilidades são infinitas. Todos estes exemplos e muito mais podem ser encontrados diretamente no site da ferramenta. E sabe o melhor de tudo? A biblioteca tem integração com as principais bibliotecas de front-end do mercado! Ou seja, o React, Angular e Vue!\u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003E\r\n\u003C\u002Fspan\u003E\r\n\r\n\u003Cspan style=\"font-weight: 400;\"\u003ESó pra te dar um exemplo, vamos criar rapidamente um projeto com o Vite e usar a biblioteca lá.\u003C\u002Fspan\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003Enpm create vite@latest\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003Enpm install --save sweetalert2 sweetalert2-react-content\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Cspan style=\"font-weight: 400;\"\u003EJá podemos adicionar no componente!\u003C\u002Fspan\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003Eimport Swal from 'sweetalert2';\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003Eimport withReactContent from 'sweetalert2-react-content';\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n \r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003Eimport reactLogo from '.\u002Fassets\u002Freact.svg'\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003Eimport viteLogo from '\u002Fvite.svg'\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003Eimport '.\u002FApp.css'\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n \r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003Efunction App() {\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E function handleMessage() {\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E const MySwal = withReactContent(Swal);\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n \r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E MySwal.fire({\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E title: \"The Internet?\",\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E text: \"That thing is still around?\",\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E icon: \"question\"\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E });\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E }\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n \r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E return (\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E <>\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E <div>\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E <a href=\"<https:\u002F\u002Fvitejs.dev>\" target=\"_blank\">\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E <img src={viteLogo} className=\"logo\" alt=\"Vite logo\" \u002F>\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E <\u002Fa>\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E <a href=\"<https:\u002F\u002Freact.dev>\" target=\"_blank\">\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E <img src={reactLogo} className=\"logo react\" alt=\"React logo\" \u002F>\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E <\u002Fa>\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E <\u002Fdiv>\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E <h1>Vite + React<\u002Fh1>\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E <div className=\"card\">\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E <button onClick={handleMessage}>\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E aperta ai!\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E <\u002Fbutton>\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E <p>\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E Edit <code>src\u002FApp.jsx<\u002Fcode> and save to test HMR\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E <\u002Fp>\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E <\u002Fdiv>\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E <p className=\"read-the-docs\">\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E Click on the Vite and React logos to learn more\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E <\u002Fp>\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E <\u002F>\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E )\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003E}\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\r\n \r\n\r\n\u003Ccode\u003E\u003Cspan style=\"font-weight: 400;\"\u003Eexport default App\u003C\u002Fspan\u003E\u003C\u002Fcode\u003E\r\n\u003Ch4\u003E\u003Cstrong\u003EConclusão\u003C\u002Fstrong\u003E\u003C\u002Fh4\u003E\r\n\u003Cspan style=\"font-weight: 400;\"\u003EEu poderia continuar mostrando diversos exemplos do que a biblioteca é capaz, mas no \u003C\u002Fspan\u003E\u003Ca href=\"https:\u002F\u002Fsweetalert2.github.io\u002F\"\u003E\u003Cspan style=\"font-weight: 400;\"\u003Epróprio site oficial\u003C\u002Fspan\u003E\u003C\u002Fa\u003E\u003Cspan style=\"font-weight: 400;\"\u003E há uma série de outros exemplos, tais como alertas com:\u003C\u002Fspan\u003E\r\n\u003Cul\u003E\r\n \t\u003Cli style=\"font-weight: 400;\" aria-level=\"1\"\u003E\u003Cspan style=\"font-weight: 400;\"\u003ERequisições AJAX;\u003C\u002Fspan\u003E\u003C\u002Fli\u003E\r\n \t\u003Cli style=\"font-weight: 400;\" aria-level=\"1\"\u003E\u003Cspan style=\"font-weight: 400;\"\u003ELayout customizado (fundo, imagem, cores, etc);\u003C\u002Fspan\u003E\u003C\u002Fli\u003E\r\n \t\u003Cli style=\"font-weight: 400;\" aria-level=\"1\"\u003E\u003Cspan style=\"font-weight: 400;\"\u003EPosicionamento diferente (repare que por padrão ele coloca sempre no meio, independente do tamanho do seu device!);\u003C\u002Fspan\u003E\u003C\u002Fli\u003E\r\n \t\u003Cli style=\"font-weight: 400;\" aria-level=\"1\"\u003E\u003Cspan style=\"font-weight: 400;\"\u003EFechamento automático (\u003C\u002Fspan\u003E\u003Ci\u003E\u003Cspan style=\"font-weight: 400;\"\u003Eauto close timer\u003C\u002Fspan\u003E\u003C\u002Fi\u003E\u003Cspan style=\"font-weight: 400;\"\u003E);\u003C\u002Fspan\u003E\u003C\u002Fli\u003E\r\n \t\u003Cli style=\"font-weight: 400;\" aria-level=\"1\"\u003E\u003Cspan style=\"font-weight: 400;\"\u003EE muito mais!\u003C\u002Fspan\u003E\u003C\u002Fli\u003E\r\n\u003C\u002Ful\u003E\r\n\u003Cspan style=\"font-weight: 400;\"\u003ETodas as demais configurações possíveis, tipos de input, métodos, eventos e afins estão disponíveis no site também.\u003C\u002Fspan\u003E\r\n\r\n\u003Cem\u003E\u003Cstrong\u003ELEIA TAMBÉM\u003C\u002Fstrong\u003E\u003C\u002Fem\u003E\r\n\u003Cul\u003E\r\n \t\u003Cli\u003E\u003Ca href=\"https:\u002F\u002Fimasters.com.br\u002Ftendencias\u002Frecuperando-computadores-antigos-com-o-chromeos-flex\"\u003ERecuperando computadores antigos com o ChromeOS Flex\u003C\u002Fa\u003E\u003C\u002Fli\u003E\r\n \t\u003Cli\u003E\u003Ca href=\"https:\u002F\u002Fimasters.com.br\u002Fjavascript\u002Fcomo-publicar-um-pacote-no-npm-apresentando-sua-biblioteca-para-o-mundo\"\u003EComo publicar um pacote no npm; apresentando sua biblioteca para o mundo\u003C\u002Fa\u003E\u003C\u002Fli\u003E\r\n\u003C\u002Ful\u003E","excerpt":"\u003Cp\u003EAlertas bonitos, responsivos e customizados com o SweetAlert2. Quando estamos falando de desenvolvimento web, há praticamente duas coisas que …\u003C\u002Fp\u003E\n","link":"https:\u002F\u002Fimasters.com.br\u002Fjavascript\u002Falertas-bonitos-responsivos-e-customizados-com-o-sweetalert-2","date":"11 set, 2024","thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2024\u002F09\u002F21154348\u002FSweetAlert2.jpg","externalMention":"","author":{"id":"144418","thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2018\u002F05\u002F30171243\u002Fdiego-pinho.jpg","name":"Diego Pinho","description":"Bacharel em Ciência da Computação pela PUCSP e MBA em Gestão da Tecnologia da Informação na FIAP. Autor do livro ECMAScript 6 - Entre de cabeça no futuro do JavaScript. Cofundador da Code Prestige e Community Manager no iMasters.","slug":"diegopinho","url":"https:\u002F\u002Fimasters.com.br\u002Fperfil\u002Fdiegopinho","registered":"2013-08-13 18:00:53","social":{"linkedin":null,"youtube":null,"facebook":"","twitter":"https:\u002F\u002Ftwitter.com\u002FDiegoPinho","instagram":null,"github":null,"url":"http:\u002F\u002Fwww.diegopinho.com.br","mail":"diego.pinho@imasters.com.br"},"articles_count":113,"views_count":1276900,"certifications":null,"conquests":null,"office":null},"categories":[{"title":"JavaScript","slug":"javascript","id":7220,"link":"https:\u002F\u002Fimasters.com.br\u002Fjavascript"}],"tags":[{"title":"Ajax","slug":"ajax","id":7236,"link":"https:\u002F\u002Fimasters.com.br\u002Fajax"},{"title":"Alertas bonitos","slug":"alertas-bonitos","id":9093,"link":"https:\u002F\u002Fimasters.com.br\u002Falertas-bonitos"},{"title":"angular","slug":"angular","id":2633,"link":"https:\u002F\u002Fimasters.com.br\u002Fangular"},{"title":"biblioteca","slug":"biblioteca","id":401,"link":"https:\u002F\u002Fimasters.com.br\u002Fbiblioteca"},{"title":"customizados","slug":"customizados","id":9095,"link":"https:\u002F\u002Fimasters.com.br\u002Fcustomizados"},{"title":"front-end","slug":"front-end-3","id":1439,"link":"https:\u002F\u002Fimasters.com.br\u002Ffront-end-3"},{"title":"javascript","slug":"javascript-2","id":214,"link":"https:\u002F\u002Fimasters.com.br\u002Fjavascript-2"},{"title":"react","slug":"react","id":3321,"link":"https:\u002F\u002Fimasters.com.br\u002Freact"},{"title":"responsivos","slug":"responsivos","id":9094,"link":"https:\u002F\u002Fimasters.com.br\u002Fresponsivos"},{"title":"SweetAlert2","slug":"sweetalert2","id":6811,"link":"https:\u002F\u002Fimasters.com.br\u002Fsweetalert2"},{"title":"vue","slug":"vue","id":4810,"link":"https:\u002F\u002Fimasters.com.br\u002Fvue"},{"title":"withReactContent","slug":"withreactcontent","id":9096,"link":"https:\u002F\u002Fimasters.com.br\u002Fwithreactcontent"}],"relateds":[],"seo":[],"type":"post"},{"id":161633,"title":"Recuperando computadores antigos com o ChromeOS Flex","content":"\u003Cspan style=\"font-weight: 400;\"\u003ESe você comprou um computador para uso pessoal há algum tempo é muito provável que esta máquina não esteja aguentando rodar muitas coisas. E não é pra menos: o próprio sistema operacional (no caso estou falando do Windows) fica mais pesado e robusto, assim como os programas básicos, como o Google Chrome e afins. Em suma, enquanto o hardware permanece o mesmo, os softwares exigem cada vez mais.\u003C\u002Fspan\u003E\r\n\u003Ch3\u003E\u003Cb\u003EDando um tapa nos computadores antigos\u003C\u002Fb\u003E\u003C\u002Fh3\u003E\r\n\u003Cspan style=\"font-weight: 400;\"\u003EPara conseguir dar uma nova vida para esses dispositivos, os usuários mais avançados (geralmente programadores como eu e você, rs) acabam migrando para outros sistemas operacionais, como por exemplo, as distribuições Linux (ex: Ubuntu, Mint, etc). Mas existe uma alternativa ainda mais leve e que tornará o seu computador perfeito principalmente se o foco for trabalho e\u002Fou estudo.\u003C\u002Fspan\u003E\r\n\r\n\u003Cspan style=\"font-weight: 400;\"\u003EEstou falando do ChromeOs Flex!\u003C\u002Fspan\u003E\r\n\u003Ch3\u003E\u003Cb\u003EVersão em vídeo\u003C\u002Fb\u003E\u003C\u002Fh3\u003E\r\n\u003Cspan style=\"font-weight: 400;\"\u003EO artigo abaixo descreve detalhadamente todos os passos necessários, mas caso precise de um apoio mais visual, você pode acompanhar todos os passos no vídeo abaixo:\u003C\u002Fspan\u003E\r\n\r\n\u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=iHiYzw-ON28\"\u003E\u003Cspan style=\"font-weight: 400;\" data-rich-links=\"{"fple-t":"Salve seu computador antigo com o ChromeOS Flex","fple-u":"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=iHiYzw-ON28","fple-mt":null,"type":"first-party-link"}\"\u003ESalve seu computador antigo com o ChromeOS Flex\u003C\u002Fspan\u003E\u003C\u002Fa\u003E\r\n\u003Ch2\u003E\u003Cb\u003EO sistema operacional do Google - ChromeOS Flex\u003C\u002Fb\u003E\u003C\u002Fh2\u003E\r\n\u003Cspan style=\"font-weight: 400;\"\u003EO ChromeOS Flex é o sistema operacional do Google focado em serviços na nuvem. Antes ele estava disponível somente para os dispositivos licenciados pelo Google, os chromebooks. Agora existe essa flexibilidade e podemos tirar vantagem disso (afinal de contas, o hardware dessas máquinas eram geralmente fracas em armazenamento, memória ram, processador, etc).\u003C\u002Fspan\u003E\r\n\r\n\u003Cspan style=\"font-weight: 400;\"\u003EVale citar que existem duas limitações:\u003C\u002Fspan\u003E\r\n\u003Cul\u003E\r\n \t\u003Cli style=\"font-weight: 400;\" aria-level=\"1\"\u003E\u003Cspan style=\"font-weight: 400;\"\u003ENão é possível instalar aplicativos Android;\u003C\u002Fspan\u003E\u003C\u002Fli\u003E\r\n \t\u003Cli style=\"font-weight: 400;\" aria-level=\"1\"\u003E\u003Cspan style=\"font-weight: 400;\"\u003ENão é possível instalar a Play Store.\u003C\u002Fspan\u003E\u003C\u002Fli\u003E\r\n\u003C\u002Ful\u003E\r\n\u003Cspan style=\"font-weight: 400;\"\u003ETambém existe a limitação de hardware. Estes são os requisitos mínimos:\u003C\u002Fspan\u003E\r\n\u003Cul\u003E\r\n \t\u003Cli style=\"font-weight: 400;\" aria-level=\"1\"\u003E\u003Cspan style=\"font-weight: 400;\"\u003EIntel ou AMD x86-64-bit CPU;\u003C\u002Fspan\u003E\u003C\u002Fli\u003E\r\n \t\u003Cli style=\"font-weight: 400;\" aria-level=\"1\"\u003E\u003Cspan style=\"font-weight: 400;\"\u003E4GB RAM;\u003C\u002Fspan\u003E\u003C\u002Fli\u003E\r\n \t\u003Cli style=\"font-weight: 400;\" aria-level=\"1\"\u003E\u003Cspan style=\"font-weight: 400;\"\u003E16GB de armazenamento;\u003C\u002Fspan\u003E\u003C\u002Fli\u003E\r\n \t\u003Cli style=\"font-weight: 400;\" aria-level=\"1\"\u003E\u003Cspan style=\"font-weight: 400;\"\u003EAcesso a BIOS do computador.\u003C\u002Fspan\u003E\u003C\u002Fli\u003E\r\n\u003C\u002Ful\u003E\r\n\u003Ch3\u003E\u003Cb\u003EPassos para instalação\u003C\u002Fb\u003E\u003C\u002Fh3\u003E\r\n\u003Cspan style=\"font-weight: 400;\"\u003EO processo é bem simples e praticamente dividido em três passos:\u003C\u002Fspan\u003E\r\n\u003Col\u003E\r\n \t\u003Cli style=\"font-weight: 400;\" aria-level=\"1\"\u003E\u003Cspan style=\"font-weight: 400;\"\u003ECriar um pendrive bootável com o sistema do ChromeOS (no mínimo 8GB);\u003C\u002Fspan\u003E\u003C\u002Fli\u003E\r\n \t\u003Cli style=\"font-weight: 400;\" aria-level=\"1\"\u003E\u003Cspan style=\"font-weight: 400;\"\u003EInstalar o sistema no computador (substituindo o atual ou rodando diretamente pelo pendrive ⇒ opção “Testar Primeiro”);\u003C\u002Fspan\u003E\u003C\u002Fli\u003E\r\n \t\u003Cli style=\"font-weight: 400;\" aria-level=\"1\"\u003E\u003Cspan style=\"font-weight: 400;\"\u003EConfigurar e usar 😉\u003C\u002Fspan\u003E\u003C\u002Fli\u003E\r\n\u003C\u002Fol\u003E\r\n\u003Cspan style=\"font-weight: 400;\"\u003EPara iniciar o processo, basta que você plugue um USB no seu computador (ele será zerado, então faça um backup dos arquivos se não quiser perder tudo!) e baixe a extensão abaixo no seu navegador (qualquer um que seja com base no Chromium ⇒ ex: edge, chrome, brave, etc.)\u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003E\r\n\u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003E\r\n\u003C\u002Fspan\u003E\u003Ca href=\"https:\u002F\u002Fchromewebstore.google.com\u002Fdetail\u002Futilit%C3%A1rio-de-recupera%C3%A7%C3%A3o\u002Fpocpnlppkickgojjlmhdmidojbmbodfm?pli=1\"\u003E \u003Cspan style=\"font-weight: 400;\"\u003EChromebook Recovery Utility\u003C\u002Fspan\u003E\u003C\u002Fa\u003E\r\n\r\n \r\n\r\n\u003Cspan style=\"font-weight: 400;\"\u003EQuando ela estiver instalada, inicie o processo selecionando a opção \u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003ESelecionar um modelo na lista\u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003E e use as opções abaixo:\u003C\u002Fspan\u003E\r\n\r\n\u003Ca href=\"https:\u002F\u002Fadmin.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2024\u002F07\u002FPinho-1.jpg\"\u003E\u003Cimg class=\"alignnone wp-image-161634 size-full\" src=\"https:\u002F\u002Fadmin.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2024\u002F07\u002FPinho-1.jpg\" alt=\"ChromeOS Flex é representado no artigo por uma imagem do buscador Google\" width=\"757\" height=\"481\" \u002F\u003E\u003C\u002Fa\u003E\r\n\r\n\u003Cspan style=\"font-weight: 400;\"\u003EPreencha com \u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003EGoogle ChromeOS Flex\u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003E e \u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003EChromeOS Flex\u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003E conforme a imagem abaixo:\u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003E\r\n\u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003E\u003Ca href=\"https:\u002F\u002Fadmin.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2024\u002F07\u002FPinho-2.jpg\"\u003E\u003Cimg class=\"alignnone wp-image-161635 size-full\" src=\"https:\u002F\u002Fadmin.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2024\u002F07\u002FPinho-2.jpg\" alt=\"ChromeOS Flex é representado no artigo por uma imagem do buscador Google\" width=\"758\" height=\"483\" \u002F\u003E\u003C\u002Fa\u003E\u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003E\r\n\u003C\u002Fspan\u003E \u003Cspan style=\"font-weight: 400;\"\u003E\r\n\u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003ENa próxima tela você selecionará qual é o dispositivo em que deseja instalar. Selecione o seu pendrive:\u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003E\r\n\u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003E\r\n\u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003E\u003Ca href=\"https:\u002F\u002Fadmin.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2024\u002F07\u002FPinho-3.jpg\"\u003E\u003Cimg class=\"alignnone wp-image-161636 size-full\" src=\"https:\u002F\u002Fadmin.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2024\u002F07\u002FPinho-3.jpg\" alt=\"ChromeOS Flex é representado no artigo por uma imagem do buscador Google\" width=\"762\" height=\"490\" \u002F\u003E\u003C\u002Fa\u003E\u003C\u002Fspan\u003E\r\n\r\n \r\n\r\n\u003Cspan style=\"font-weight: 400;\"\u003EFeita a instalação, precisaremos acessar a BIOS do computador para conseguir colocar o pen drive como a primeira opção de início. Cada computador tem uma tecla diferente de acesso a BIOS. Abaixo vou deixar uma lista com as teclas mais comuns utilizadas para cada modelo:\u003C\u002Fspan\u003E\r\n\u003Cul\u003E\r\n \t\u003Cli style=\"font-weight: 400;\" aria-level=\"1\"\u003E\u003Cspan style=\"font-weight: 400;\"\u003EAcer, Intel, Toshiba, Samsung: \u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003EF2\u003C\u002Fspan\u003E\u003C\u002Fli\u003E\r\n \t\u003Cli style=\"font-weight: 400;\" aria-level=\"1\"\u003E\u003Cspan style=\"font-weight: 400;\"\u003EApple: Segurar o \u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003EOption\u003C\u002Fspan\u003E\u003C\u002Fli\u003E\r\n \t\u003Cli style=\"font-weight: 400;\" aria-level=\"1\"\u003E\u003Cspan style=\"font-weight: 400;\"\u003EAsus: \u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003EDel\u003C\u002Fspan\u003E\u003C\u002Fli\u003E\r\n \t\u003Cli style=\"font-weight: 400;\" aria-level=\"1\"\u003E\u003Cspan style=\"font-weight: 400;\"\u003EDell, Lenovo, Toshiba: \u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003EF12\u003C\u002Fspan\u003E\u003C\u002Fli\u003E\r\n \t\u003Cli style=\"font-weight: 400;\" aria-level=\"1\"\u003E\u003Cspan style=\"font-weight: 400;\"\u003EHP: \u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003EF9\u003C\u002Fspan\u003E\u003C\u002Fli\u003E\r\n \t\u003Cli style=\"font-weight: 400;\" aria-level=\"1\"\u003E\u003Cspan style=\"font-weight: 400;\"\u003EOutros: \u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003EESC\u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003E, \u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003EENTER\u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003E ou qualquer uma das teclas entre \u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003EF1\u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003E e \u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003EF12\u003C\u002Fspan\u003E\u003C\u002Fli\u003E\r\n\u003C\u002Ful\u003E\r\n\u003Cspan style=\"font-weight: 400;\"\u003EUma vez acessada a BIOS, precisaremos buscar pela opção de BOOT da máquina. Lá, escolha a opção que representa o seu dispositivo de pendrive. Agora você pode escolher entre instalar o sistema e substituir o seu sistema operacional atual ou então somente testar o sistema.\u003C\u002Fspan\u003E\u003Cspan style=\"font-weight: 400;\"\u003E\r\n\u003C\u002Fspan\u003E \u003Cspan style=\"font-weight: 400;\"\u003E\r\n\u003Ca href=\"https:\u002F\u002Fadmin.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2024\u002F07\u002FPinho-4.jpg\"\u003E\u003Cimg class=\"alignnone wp-image-161637 size-full\" src=\"https:\u002F\u002Fadmin.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2024\u002F07\u002FPinho-4.jpg\" alt=\"ChromeOS Flex é representado no artigo por uma imagem do buscador Google\" width=\"760\" height=\"510\" \u002F\u003E\u003C\u002Fa\u003E\r\n\u003C\u002Fspan\u003E\r\n\r\n \r\n\r\n\u003Cspan style=\"font-weight: 400;\"\u003ESiga com o processo de instalação. Feito isso, basta reiniciar o computador e o processo está pronto! 😉\u003C\u002Fspan\u003E\r\n\u003Ch3\u003E\u003Cb\u003EReferências\u003C\u002Fb\u003E\u003C\u002Fh3\u003E\r\n\u003Cul\u003E\r\n \t\u003Cli style=\"font-weight: 400;\" aria-level=\"1\"\u003E\u003Ca href=\"https:\u002F\u002Fchromeos.google\u002Fproducts\u002Fchromeos-flex\u002F\"\u003E\u003Cspan style=\"font-weight: 400;\"\u003Ehttps:\u002F\u002Fchromeos.google\u002Fproducts\u002Fchromeos-flex\u002F\u003C\u002Fspan\u003E\u003C\u002Fa\u003E\u003C\u002Fli\u003E\r\n \t\u003Cli style=\"font-weight: 400;\" aria-level=\"1\"\u003E\u003Ca href=\"https:\u002F\u002Fchromewebstore.google.com\u002Fdetail\u002Futilit%C3%A1rio-de-recupera%C3%A7%C3%A3o\u002Fpocpnlppkickgojjlmhdmidojbmbodfm\"\u003E\u003Cspan style=\"font-weight: 400;\"\u003Ehttps:\u002F\u002Fchromewebstore.google.com\u002Fdetail\u002Futilit%C3%A1rio-de-recupera%C3%A7%C3%A3o\u002Fpocpnlppkickgojjlmhdmidojbmbodfm\u003C\u002Fspan\u003E\u003C\u002Fa\u003E\u003C\u002Fli\u003E\r\n\u003C\u002Ful\u003E\r\n\u003Cem\u003E\u003Cstrong\u003ELEIA TAMBÉM:\u003C\u002Fstrong\u003E\u003C\u002Fem\u003E\r\n\u003Cul\u003E\r\n \t\u003Cli\u003E\u003Ca href=\"https:\u002F\u002Fimasters.com.br\u002Fapis-microsservicos\u002Fgrpc-o-poderoso-framework-da-google-para-comunicacao-eficiente-entre-servicos\"\u003EgRPC: o poderoso framework da Google para comunicação eficiente entre serviços\u003C\u002Fa\u003E\u003C\u002Fli\u003E\r\n \t\u003Cli\u003E\u003Ca href=\"https:\u002F\u002Fimasters.com.br\u002Fdesenvolvimento\u002Fasp-net-mvc-usando-o-recaptcha-da-google-parte-01\"\u003EASP .NET MVC - Usando o reCAPTCHA da Google - Parte 01\u003C\u002Fa\u003E\u003C\u002Fli\u003E\r\n\u003C\u002Ful\u003E\r\n ","excerpt":"\u003Cp\u003ESe você comprou um computador …. como o Google Chrome e afins. Em suma, enquanto o hardware … os softwares exigem cada vez mais… com o ChromeOS Flex…\u003C\u002Fp\u003E\n","link":"https:\u002F\u002Fimasters.com.br\u002Ftendencias\u002Frecuperando-computadores-antigos-com-o-chromeos-flex","date":"6 ago, 2024","thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2024\u002F07\u002F17153116\u002FGoogle-Chrome.jpg","externalMention":"","author":{"id":"144418","thumbnail":"https:\u002F\u002Fstatic.imasters.com.br\u002Fwp-content\u002Fuploads\u002F2018\u002F05\u002F30171243\u002Fdiego-pinho.jpg","name":"Diego Pinho","description":"Bacharel em Ciência da Computação pela PUCSP e MBA em Gestão da Tecnologia da Informação na FIAP. Autor do livro ECMAScript 6 - Entre de cabeça no futuro do JavaScript. Cofundador da Code Prestige e Community Manager no iMasters.","slug":"diegopinho","url":"https:\u002F\u002Fimasters.com.br\u002Fperfil\u002Fdiegopinho","registered":"2013-08-13 18:00:53","social":{"linkedin":null,"youtube":null,"facebook":"","twitter":"https:\u002F\u002Ftwitter.com\u002FDiegoPinho","instagram":null,"github":null,"url":"http:\u002F\u002Fwww.diegopinho.com.br","mail":"diego.pinho@imasters.com.br"},"articles_count":113,"views_count":1276900,"certifications":null,"conquests":null,"office":null},"categories":[{"title":"Desenvolvimento","slug":"desenvolvimento","id":7234,"link":"https:\u002F\u002Fimasters.com.br\u002Fdesenvolvimento"},{"title":"Software development","slug":"software-development-4","id":8959,"link":"https:\u002F\u002Fimasters.com.br\u002Fsoftware-development-4"},{"title":"Tecnologia","slug":"tecnologia","id":4254,"link":"https:\u002F\u002Fimasters.com.br\u002Ftecnologia"},{"title":"Tendências","slug":"tendencias","id":7264,"link":"https:\u002F\u002Fimasters.com.br\u002Ftendencias"}],"tags":[{"title":"ChromeOS","slug":"chromeos","id":9067,"link":"https:\u002F\u002Fimasters.com.br\u002Fchromeos"},{"title":"ChromeOS Flex","slug":"chromeos-flex","id":9068,"link":"https:\u002F\u002Fimasters.com.br\u002Fchromeos-flex"},{"title":"Google","slug":"google","id":7299,"link":"https:\u002F\u002Fimasters.com.br\u002Fgoogle"}],"relateds":[],"seo":[],"type":"post"}],"totalArticles":113,"maxPages":12,"page":1,"isFetchingPagination":false},"category":{"success":false,"data":{}},"categoryArticles":{"success":false,"isFetchingPagination":false,"maxPages":0,"page":1,"data":{}},"categoryMostRead":{"success":false,"data":{}},"home":{"success":false,"featured":[],"options":{"homeProducts":[]},"allCategories":{},"featuredArticles":{},"magazines":{"data":[]},"tv":{},"forums":[],"authorsRanking":{},"events":{},"certificatedUsers":[],"news":[]},"page":{"success":false,"data":{}},"magazine":{"success":false,"magazines":[]},"schedule":{"success":false,"data":{}},"searchResult":{"success":false,"totalPosts":0,"totalPage":0,"currentPage":1,"posts":[],"term":"","orderBy":"recents","currentFilter":"articles","isLoading":true,"isLoadingPagination":false},"singleNews":{"success":false,"data":{}},"listNews":{"success":false,"isFetchingPagination":false,"maxPages":0,"page":1,"data":[]},"sponsors":{"success":false,"data":{}},"header":{"success":true,"menus":{"main":[{"ID":138755,"order":1,"parent":0,"title":"Back-End","url":"https:\u002F\u002Fimasters.com.br\u002Fback-end","attr":"package","target":"","classes":"package","xfn":"","description":"Tecnologias utilizadas no backend da aplicação","object_id":7158,"object":"category","type":"taxonomy","type_label":"Categoria","children":[]},{"ID":138756,"order":2,"parent":0,"title":"Mobile","url":"https:\u002F\u002Fimasters.com.br\u002Fmobile","attr":"package","target":"","classes":"package","xfn":"","description":"Conteúdos sobre Desenvolvimento Mobile nas plataformas iOS (iPhone e iPad) e Android.","object_id":4255,"object":"category","type":"taxonomy","type_label":"Categoria","children":[]},{"ID":139476,"order":3,"parent":0,"title":"Front End","url":"https:\u002F\u002Fimasters.com.br\u002Ffront-end","attr":"package","target":"","classes":"package","xfn":"","description":"Conteúdos sobre HTML5, CSS3, Javascript, JQuery, Web Standards e SEO.","object_id":7304,"object":"category","type":"taxonomy","type_label":"Categoria","children":[]},{"ID":138764,"order":4,"parent":0,"title":"DevSecOps","url":"https:\u002F\u002Fimasters.com.br\u002Fdevsecops","attr":"package","target":"","classes":"package","xfn":"","description":"","object_id":1,"object":"category","type":"taxonomy","type_label":"Categoria","children":[]},{"ID":139204,"order":5,"parent":0,"title":"Design & UX","url":"https:\u002F\u002Fimasters.com.br\u002Fdesign-ux","attr":"package","target":"","classes":"package","xfn":"","description":"Conteúdos sobre User Experience, Arquitetura de Informação, Usabilidade, Acessibilidade, Design Responsivo, Teoria do Design e Photoshop.","object_id":7252,"object":"category","type":"taxonomy","type_label":"Categoria","children":[]},{"ID":138759,"order":6,"parent":0,"title":"Data","url":"https:\u002F\u002Fimasters.com.br\u002Fdata","attr":"package","target":"","classes":"package","xfn":"","description":"Conteúdos sobre Banco de Dados Oracle, MySQL, SQL Server, MongoDB, DB2 e Postgre SQL, sobre BI e análise de dados.","object_id":16,"object":"category","type":"taxonomy","type_label":"Categoria","children":[]},{"ID":138758,"order":7,"parent":0,"title":"APIs e Microsserviços","url":"https:\u002F\u002Fimasters.com.br\u002Fapis-microsservicos","attr":"package","target":"","classes":"package","xfn":"","description":"Dicas e tutoriais sobre APIs públicas como Facebook, Twitter, PayPal, Buscapé, Google, etc e arquitetura de microsserviços, com códigos de exemplo, vídeos, cursos.","object_id":4257,"object":"category","type":"taxonomy","type_label":"Categoria","children":[]}],"secondary":[{"ID":138752,"order":1,"parent":0,"title":"Fórum iMasters","url":"https:\u002F\u002Fforum.imasters.com.br\u002F","attr":"","target":"_blank","classes":"","xfn":"","description":"","object_id":138752,"object":"custom","type":"custom","type_label":"Link personalizado","children":[]},{"ID":139067,"order":2,"parent":0,"title":"Portal E-Commerce Brasil","url":"http:\u002F\u002Fwww.ecommercebrasil.com.br","attr":"","target":"","classes":"","xfn":"","description":"","object_id":139067,"object":"custom","type":"custom","type_label":"Link personalizado","children":[]},{"ID":156289,"order":3,"parent":0,"title":"iMasters Business","url":"http:\u002F\u002Fbusiness.imasters.com.br","attr":"","target":"","classes":"","xfn":"","description":"","object_id":156289,"object":"custom","type":"custom","type_label":"Link personalizado","children":[]}]}},"webinar":{"success":false,"data":{}},"webinars":{"success":false,"isFetchingPagination":false,"maxPages":0,"page":1,"data":{"next":[],"prev":[]}},"tv":{"sectionNameLeft":{"small":"Vídeos","large":"iMasters TV"},"itemsLeft":[{"text":"Em Destaque","slug":"recents"},{"text":"Mais Vistos","slug":"most-viewed"}],"sectionNameRight":{"small":"","large":""},"itemsRight":[{"text":"Mais Recentes","slug":"recents"},{"text":"7Masters","slug":"7-masters"},{"text":"PHP Experience","slug":"php-experience"},{"text":"Android DevConference","slug":"android-devconference"},{"text":"Busca","slug":"search"}],"currentVideo":"recents","currentListVideo":"recents"}} window.__SERVER_VARS__ = {"applicationRestUrl":"https:\u002F\u002Fadmin.imasters.com.br\u002Fwp-json","applicationBaseUrl":"https:\u002F\u002Fadmin.imasters.com.br"}