{"id":14338,"date":"2023-02-09T11:31:00","date_gmt":"2023-02-09T14:31:00","guid":{"rendered":"http:\/\/www.impacta.com.br\/blog\/?p=14338"},"modified":"2023-11-01T12:46:15","modified_gmt":"2023-11-01T15:46:15","slug":"20-topicos-bom-desenvolvedor-front-end-deveria-saber-em-2023","status":"publish","type":"post","link":"https:\/\/www.impacta.com.br\/blog\/20-topicos-bom-desenvolvedor-front-end-deveria-saber-em-2023\/","title":{"rendered":"20 t\u00f3picos que todo desenvolvedor Front-end deve saber em 2023"},"content":{"rendered":"\n<p><span style=\"font-weight: 400; font-size: 14pt;\">N\u00e3o existe f\u00f3rmula secreta <strong>ser um desenvolvedor Front End de sucesso em 2023<\/strong>, por\u00e9m, olhando para os padr\u00f5es de cases de carreiras bem sucedidas, \u00e9 poss\u00edvel identificar v\u00e1rias similaridades e pequenas a\u00e7\u00f5es que levaram \u00e0quele acontecimento.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Isso n\u00e3o \u00e9 diferente na vida de desenvolvedores. A escolha das linguagens, frameworks, ferramentas e etc, podem ser cruciais no desenvolvimento ou retrocesso profissional do desenvolvedor.<\/span><\/p>\n\n\n\n<p>Sem tempo para ler? Clique no play abaixo para ouvir o conte\u00fado!<\/p>\n\n\n\n<iframe loading=\"lazy\" width=\"100%\" height=\"83\" scrolling=\"no\" src=\"https:\/\/go.vooozer.com\/embed\/026d0a32\" frameborder=\"0\" title=\"Narra\u00e7\u00e3o humana do artigo\" style=\"height: 83px !important;\" allowfullscreen><\/iframe>\n\n\n\n<p><span style=\"font-size: 14pt;\"><span style=\"font-weight: 400;\">Pensando nisso, criamos uma lista com 20 t\u00f3picos que todo bom desenvolvedor <\/span><b>Front-end <\/b><span style=\"font-weight: 400;\">deve dominar, utilizar ou saber, para possa crescer profissionalmente ainda este ano e se diferenciar em meio a tantos outros.<\/span><\/span><\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\"><span style=\"font-weight: 400;\">Vamos l\u00e1? \ud83d\ude42<\/span><span style=\"font-weight: 400;\"><br><\/span><span style=\"font-weight: 400;\"><br><\/span><b>&gt;&gt; Leitura recomendada: <\/b><span style=\"font-weight: 400;\"><br><\/span><b><a href=\"https:\/\/blog.geekhunter.com.br\/mercado-front-end-da-origem-ate-o-futuro\/\" target=\"_blank\" rel=\"noopener noreferrer\">Linha do tempo do Front-end<\/a><\/b><\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><span style=\"font-size: 14pt;\">1. HTML5<\/span><\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">A principal linguagem de marca\u00e7\u00e3o para desenvolvimento web, o HTML5, vai muito al\u00e9m de &lt;div&gt;s. Tendo um leque de tags, o <a title=\"5 motivos para voc\u00ea aprender HTML5\" href=\"https:\/\/www.impacta.com.br\/blog\/2016\/04\/25\/5-motivos-para-aprender-html5\/\" target=\"_blank\" rel=\"noopener noreferrer\">HTML5 <\/a>d\u00e1 \u00e0 p\u00e1gina diversas funcionalidades nativas, como por exemplo, a de manipula\u00e7\u00e3o de conte\u00fados gr\u00e1ficos e multim\u00eddia, atrav\u00e9s das tags:<\/span><br><span style=\"font-size: 14pt;\"><strong><strong>&nbsp;<\/strong><\/strong><\/span><br><span style=\"font-size: 14pt;\"><span style=\"font-weight: 400;\">&lt;video&gt;<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">&lt;audio&gt;,&nbsp;<\/span><span style=\"font-weight: 400;\">&lt;canvas&gt;<\/span><\/span><br><span style=\"font-size: 14pt;\"><strong><strong>&nbsp;<\/strong><\/strong><\/span><br><span style=\"font-weight: 400; font-size: 14pt;\">Ou de estrutura\u00e7\u00e3o de conte\u00fado, com as tags:<\/span><br><span style=\"font-size: 14pt;\"><strong><strong>&nbsp;<\/strong><\/strong><\/span><br><span style=\"font-size: 14pt;\"><span style=\"font-weight: 400;\">&lt;main&gt;<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">&lt;section&gt;<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">&lt;article&gt;<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">&lt;header&gt;<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">&lt;footer&gt;<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">&lt;aside&gt;<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">&lt;nav&gt;<\/span><span style=\"font-weight: 400;\">,<\/span><span style=\"font-weight: 400;\">&lt;figure&gt;<\/span><\/span><br><span style=\"font-size: 14pt;\"><strong><strong>&nbsp;<\/strong><\/strong><\/span><br><span style=\"font-size: 14pt;\"><span style=\"font-weight: 400;\">O desenvolvedor Front-end deve saber e utilizar essas tags no momento certo, pois o seu uso impacta diretamente no <a title=\"As 6 dicas mais b\u00e1sicas de otimiza\u00e7\u00e3o SEO que voc\u00ea precisa saber\" href=\"https:\/\/www.impacta.com.br\/blog\/2017\/09\/20\/as-6-dicas-mais-basicas-de-otimizacao-seo-que-voce-precisa-saber\/\" target=\"_blank\" rel=\"noopener noreferrer\">SEO <\/a>(<\/span><i><span style=\"font-weight: 400;\">Search Engine Optimization<\/span><\/i><span style=\"font-weight: 400;\">), acessibilidade e legibilidade da sua aplica\u00e7\u00e3o.<\/span><\/span><\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\"><b>&gt;&gt; Leitura recomendada: <\/b><b><br><\/b><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Guide\/HTML\/HTML5\" target=\"_blank\" rel=\"noopener noreferrer\"><b>Guia do HTML 5<\/b><\/a><span style=\"font-weight: 400;\">.<\/span><\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><span style=\"font-size: 14pt;\">2. CSS3<\/span><\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Somente com HTML a miss\u00e3o de se reproduzir os prot\u00f3tipos do design para uma aplica\u00e7\u00e3o real seria praticamente imposs\u00edvel ou insustent\u00e1vel. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Saber <a title=\"E-book Gratuito: Posicionamento, dimens\u00f5es e outros elementos de HTML5 e CSS3\" href=\"https:\/\/www.impacta.com.br\/blog\/2015\/06\/03\/e-book-posicionamento-dimensoes-e-outros-elementos-de-html5-e-css3\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS3 <\/a>\u00e9 essencial para se criar aplica\u00e7\u00f5es responsivas, al\u00e9m de separar a responsabilidade do desenvolvimento do layout para uma linguagem espec\u00edfica para isso.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Um profissional Front-end deve saber manipular <a title=\"Flexbox ou CSS Grid: saiba quando utilizar cada ferramenta\" href=\"https:\/\/www.impacta.com.br\/blog\/2019\/04\/10\/flexbox-ou-css-grid-saiba-quando-utilizar-cada-ferramenta\/\" target=\"_blank\" rel=\"noopener noreferrer\">Flexbox<\/a>, Grid System, pequenas anima\u00e7\u00f5es com Keyframes, e tamb\u00e9m uso de classes e paradigmas de organiza\u00e7\u00e3o de c\u00f3digo como BEM.<\/span><br><span style=\"font-size: 14pt;\"><strong><strong>&nbsp;<\/strong><\/strong><\/span><br><span style=\"font-size: 14pt;\"><b>&gt;&gt;Leitura recomendada:<\/b><span style=\"font-weight: 400;\"><br><\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS3\" target=\"_blank\" rel=\"noopener noreferrer\"><b>Guia do CSS3<\/b><\/a><span style=\"font-weight: 400;\">.<\/span><\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"font-size: 14pt;\"><strong>3. JavaScript (ES6)<\/strong><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Atualmente o <a title=\"Saiba o que \u00e9 JavaScript e por que voc\u00ea deve conhec\u00ea-la!\" href=\"https:\/\/www.impacta.com.br\/blog\/2017\/12\/26\/saiba-o-que-e-javascript-e-por-que-voce-deve-conhece-la\/\" target=\"_blank\" rel=\"noopener noreferrer\">Javascript <\/a>\u00e9 uma das linguagens mais utilizadas no mundo, e no Front-end ela reina absoluta. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Com vers\u00f5es do Ecmascript cada vez mais poderosas e funcionais, \u00e9 de suma import\u00e2ncia a masteriza\u00e7\u00e3o da linguagem por qualquer desenvolvedor Front-end.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Aprender conceitos b\u00e1sicos como condi\u00e7\u00f5es e loops \u00e9 indispens\u00e1vel. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Ter conhecimentos de imutabilidade, programa\u00e7\u00e3o funcional, closures, par\u00e2metros defaults, template literals, utiliza\u00e7\u00e3o de let e const, fun\u00e7\u00f5es de manipula\u00e7\u00e3o de array, destructuring, fun\u00e7\u00f5es ass\u00edncronas, entre outros. <\/span><br><span style=\"font-size: 14pt;\"><strong><strong>&nbsp;<\/strong><\/strong><\/span><br><span style=\"font-size: 14pt;\"><b>&gt;&gt; Leitura recomendada:<\/b><\/span><br><span style=\"font-size: 14pt;\"><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\" target=\"_blank\" rel=\"noopener noreferrer\"><b>Guia do JavaScript<\/b><\/a><span style=\"font-weight: 400;\">. <\/span><\/span><\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\"><strong>4. Framework e Libraries<\/strong><\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">J\u00e1 sabemos que ter um conhecimento s\u00f3lido de JavaScript \u00e9 essencial e indispens\u00e1vel para qualquer um que queira se tornar um bom desenvolvedor Front-end. No entanto \u201csomente\u201d isso ainda n\u00e3o \u00e9 o suficiente.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">O especialista em Front-end que quer entrar com tudo no mercado deve aprender e masterizar ao menos um framework ou library de mercado. Como, por exemplo, os mais famosos e utilizados nos dias de hoje: <a title=\"Saiba o que \u00e9 React e entenda como us\u00e1-lo no desenvolvimento\" href=\"https:\/\/www.impacta.com.br\/blog\/2019\/02\/27\/saiba-o-que-e-react-e-entenda-como-usa-lo-no-desenvolvimento\/\" target=\"_blank\" rel=\"noopener noreferrer\">React<\/a>, <a href=\"https:\/\/www.impacta.com.br\/online\/Desenvolvendo-Aplicacoes-Web-com-Angular-4-MEAN-online.php\" target=\"_blank\" rel=\"noopener noreferrer\">Angular <\/a>ou Vue.<\/span><\/p>\n\n\n\n<p><strong>\u00c9 \u00f3bvio que existem algumas diverg\u00eancias em rela\u00e7\u00e3o \u00e0 qual framework ou library abre mais portas no mercado de trabalho. At\u00e9 que voc\u00ea se decida, aqui vai algumas das Vagas para Desenvolvedores na plataforma da GeekHunter:<\/strong><br>&gt; <a href=\"https:\/\/www.geekhunter.com.br\/vagas\/React\" target=\"_blank\" rel=\"noopener noreferrer\">Vagas React<br><\/a><strong>&gt; <a href=\"https:\/\/www.geekhunter.com.br\/vagas\/Angular%202\" target=\"_blank\" rel=\"noopener noreferrer\">Vagas Angular 2<br><\/a><\/strong><strong>&gt; <a href=\"https:\/\/www.geekhunter.com.br\/vagas\/Angular%207\" target=\"_blank\" rel=\"noopener noreferrer\">Vagas Angular 7<br><\/a><\/strong><strong>&gt; <a href=\"https:\/\/www.geekhunter.com.br\/vagas\/Vue.js\" target=\"_blank\" rel=\"noopener noreferrer\">Vagas Vue.js<br><\/a><\/strong><strong>&gt; <a href=\"https:\/\/www.geekhunter.com.br\/vagas\/JavaScript\" target=\"_blank\" rel=\"noopener noreferrer\">Vagas Javascript<\/a><\/strong><\/p>\n\n\n\n<p><strong>Se voc\u00ea curtir alguma, basta criar um perfil e come\u00e7ar a receber propostas nas tecnologias de sua escolha.&nbsp;<\/strong><\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\"><b>&gt;&gt;Leitura recomendada: <\/b><span style=\"font-weight: 400;\"><br><\/span><b><a href=\"https:\/\/blog.geekhunter.com.br\/react-vs-vue-vs-angular-qual-escolher\/\" target=\"_blank\" rel=\"noopener noreferrer\">React vs Vue vs Angular: qual escolher?<\/a><\/b><\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><span style=\"font-size: 14pt;\">5. Versionamento<\/span><\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Todo bom desenvolvedor, independente de ser Front-end ou n\u00e3o, deve saber utilizar ferramentas de versionamento de c\u00f3digo, assim como os seus conceitos. Hoje, o melhor e mais famoso software feito de tal forma \u00e9 o Git.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"font-size: 14pt;\"><strong>6. UX\/UI (User Experience\/User Interface)<\/strong><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Seu produto pode possuir todas as funcionalidades funcionando perfeitamente, sem erros ou gera\u00e7\u00e3o de bugs, por\u00e9m, caso ele gere uma m\u00e1 experi\u00eancia ao usu\u00e1rio no momento de sua utiliza\u00e7\u00e3o ele pode estar fadado ao fracasso.<\/span><\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\"><span style=\"font-weight: 400;\">O desenvolvedor Front-end deve saber criar aplica\u00e7\u00f5es que sejam fluidas, que possuam interfaces gr\u00e1ficas amig\u00e1veis ao usu\u00e1rio e que em sua totalidade respeitem as <\/span><b>heur\u00edsticas de Nielsen<\/b><span style=\"font-weight: 400;\">.<\/span><\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"font-size: 14pt;\"><strong>7. Debug<\/strong><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Ao se deparar com a cria\u00e7\u00e3o de uma nova funcionalidade ou corre\u00e7\u00e3o de um bug, ter conhecimento sobre o ambiente de desenvolvimento, pode salvar horas de trabalho ao desenvolvedor.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Logo, um bom desenvolvedor Front-end, deve e precisa estar antenado sobre as funcionalidades de debug que o seu navegador padr\u00e3o possui.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Por exemplo, o Google Chrome possui o DevTools, onde o desenvolvedor pode verificar os elementos e tags utilizados em sua aplica\u00e7\u00e3o, o seu tempo de renderiza\u00e7\u00e3o, informa\u00e7\u00f5es em cache, aplicar e verificar mudan\u00e7as de CSS, visualizar respostas das chamadas HTTP e muito mais.<\/span><br><span style=\"font-size: 14pt;\"><strong><strong>&nbsp;<\/strong><\/strong><\/span><br><span style=\"font-size: 14pt;\"><b>&gt;&gt;Aprenda mais em: <\/b><\/span><br><span style=\"font-size: 14pt;\"><b><a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/\">Chrome DevTools<\/a><\/b><\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"font-size: 14pt;\"><strong>8. Acessibilidade<\/strong><\/span><\/h2>\n\n\n\n<p><span style=\"font-size: 14pt;\"><span style=\"font-weight: 400;\">Independente do problema que uma aplica\u00e7\u00e3o venha a solucionar, a aplica\u00e7\u00e3o deve possuir funcionalidades acess\u00edveis aos mais diversos usu\u00e1rios, assim como usu\u00e1rios <\/span><b>PCD<\/b><span style=\"font-weight: 400;\"> (<\/span><i><span style=\"font-weight: 400;\">Pessoas com Defici\u00eancia<\/span><\/i><span style=\"font-weight: 400;\">).<\/span><\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">\u00c9 de suma import\u00e2ncia que o desenvolvedor Front-end possua os conhecimentos te\u00f3ricos e habilidades t\u00e9cnicas para aplicar tais conceitos em suas aplica\u00e7\u00f5es e funcionalidades.<\/span><br><span style=\"font-size: 14pt;\"><strong><strong>&nbsp;<\/strong><\/strong><\/span><br><span style=\"font-size: 14pt;\"><b>&gt;&gt; Leitura recomendada:<\/b><span style=\"font-weight: 400;\"><br><\/span><b><a href=\"https:\/\/www.w3.org\/standards\/webdesign\/accessibility\" target=\"_blank\" rel=\"noopener noreferrer\">Acessibilidade no Web Design<\/a><\/b><\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><span style=\"font-size: 14pt;\">9. SEO (Search Engine Optimization)<\/span><\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">De nada adianta desenvolver um super produto e o mesmo n\u00e3o \u00e9 achado pelas mais famosas ferramentas de busca, certo?<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Saber sobre Search Engine Optimization, s\u00e3o essenciais para um desenvolvedor <a title=\"Desenvolvedor: Front-End, Back-End ou Full Stack?\" href=\"https:\/\/www.impacta.com.br\/blog\/2017\/10\/25\/desenvolvedor-front-end-back-end-ou-full-stack\/\" target=\"_blank\" rel=\"noopener noreferrer\">Front-end<\/a>. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Aplicando tais conhecimentos, a aplica\u00e7\u00e3o poder\u00e1 ser localizada mais facilmente e o crescimento org\u00e2nico ir\u00e1 ocorrer de maneira exponencial.<\/span><\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\"><b>&gt;&gt;Leitura recomendada: <\/b><\/span><br><span style=\"font-size: 14pt;\"><b><a href=\"https:\/\/www.practicalecommerce.com\/6-ways-web-developers-can-improve-seo\">6 maneiras que os Desenvolvedores podem aprender SEO<\/a><\/b><\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"font-size: 14pt;\"><strong>10. Responsividade e Cross Browser<\/strong><\/span><\/h2>\n\n\n\n<p><span style=\"font-size: 14pt;\">Atualmente existem diversas formas de se acessar a mesma aplica\u00e7\u00e3o web, por meio de diferentes aparelhos, como computadores desktop, tablets ou dispositivos m\u00f3veis.<\/span><\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\"><span style=\"font-weight: 400;\">Logo, a aplica\u00e7\u00e3o necessita ser responsiva a diferentes tamanhos de telas. <\/span><\/span><\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\"><span style=\"font-weight: 400;\">Al\u00e9m de diferentes aparelhos, a mesma aplica\u00e7\u00e3o pode ser acessada por diferentes navegadores web. <\/span><span style=\"font-weight: 400;\"><br><\/span><span style=\"font-weight: 400;\"><br><\/span><span style=\"font-weight: 400;\">Portanto, toda e qualquer aplica\u00e7\u00e3o web deve ser testada em diferentes navegadores durante o processo de desenvolvimento.<\/span><\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">O desenvolvedor Front-end precisa ter em mente esses conceitos para se destacar no mercado em 2023, assim como utiliz\u00e1-los. Nenhum usu\u00e1rio quer ter uma p\u00e9ssima experi\u00eancia ao trocar de aparelho, certo?<\/span><br><span style=\"font-size: 14pt;\"><strong><strong>&nbsp;<\/strong><\/strong><\/span><br><span style=\"font-size: 14pt;\"><b>&gt;&gt;Aprenda mais em: <\/b><\/span><br><span style=\"font-size: 14pt;\"><a href=\"https:\/\/learn.freecodecamp.org\/responsive-web-design\/responsive-web-design-principles\/\" target=\"_blank\" rel=\"noopener noreferrer\"><b>Introdu\u00e7\u00e3o ao Web Design responsivo<\/b><\/a><\/span><br><span style=\"font-size: 14pt;\"><strong><strong>&nbsp;<\/strong><\/strong><\/span><\/p>\n\n\n\n<p class=\"has-text-align-left\"><span style=\"font-size: 14pt;\"><b>&gt;&gt;Leitura recomendada: <\/b><span style=\"font-weight: 400;\"><br><\/span><b><a href=\"https:\/\/crossbrowsertesting.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Cross Browser Testing<\/a><\/b><\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><span style=\"font-size: 14pt;\">11. Testes<\/span><\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Normalmente, todo desenvolvedor que come\u00e7a a utilizar testes dentro do seu processo de desenvolvimento fala que n\u00e3o quer \u201clargar m\u00e3o\u201d de utiliz\u00e1-los nunca mais. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">As incont\u00e1veis horas de trabalho salvas pelo simples fato de se utilizar testes, s\u00e3o imensur\u00e1veis.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">O poder de se modificar uma parte da aplica\u00e7\u00e3o e de se dar conta que algo errado aconteceu no mesmo momento, e outra parte da aplica\u00e7\u00e3o parou de funcionar, \u00e9 imensa.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Ter no\u00e7\u00f5es de aplica\u00e7\u00e3o de testes com Jest, Enzyme, Chai, e outros. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">\u00c9 essencial para um bom desenvolvedor Front-end. Existem empresas que s\u00f3 contratam desenvolvedores que sabem utilizar alguma ferramenta de testes.<\/span><br><span style=\"font-size: 14pt;\"><strong><strong>&nbsp;<\/strong><\/strong><\/span><br><span style=\"font-size: 14pt;\"><b>&gt;&gt;Aprenda mais em:<\/b><span style=\"font-weight: 400;\"><br><\/span><b><a href=\"https:\/\/frontendmasters.com\/books\/front-end-handbook\/2018\/tools\/testing.html\" target=\"_blank\" rel=\"noopener noreferrer\">Testing Tools<\/a><\/b><\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><span style=\"font-size: 14pt;\">12. Code Readability<\/span><\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">A arte de codificar n\u00e3o \u00e9 meramente e puramente feita para que um computador possa executar o c\u00f3digo, creio que exista v\u00e1rios aspectos humanos no processo e, caso seja deixada de lado, diversos problemas acabam nascendo.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">O custo de se ter uma base de c\u00f3digo ileg\u00edvel \u00e9 alt\u00edssima.<\/span><br><span style=\"font-weight: 400; font-size: 14pt;\">Imagine a seguinte situa\u00e7\u00e3o: uma equipe ou um programador espec\u00edfico sai do seu time, aquela joia rara que sabia \u201cde ponta \u00e0 ponta\u201d como o projeto funcionava.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Por\u00e9m, ao se contratar uma equipe ou uma pessoa nova, os mesmos n\u00e3o conseguem entender absolutamente nada do que se trata o projeto, fazendo com que se cogite a ideia de se desenvolver do zero uma aplica\u00e7\u00e3o nova.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Um bom desenvolvedor Front-end, al\u00e9m de escrever c\u00f3digo para solucionar um problema, deve escrever c\u00f3digos que possam ser entendidos pelos seus colegas de trabalho.<\/span><br><span style=\"font-size: 14pt;\"><strong><strong>&nbsp;<\/strong><\/strong><\/span><br><span style=\"font-size: 14pt;\"><b>&gt;&gt; Leitura recomendada: <\/b><\/span><br><span style=\"font-size: 14pt;\"><b><a href=\"https:\/\/www.amazon.com.br\/gp\/product\/8576082675\" target=\"_blank\" rel=\"noopener noreferrer\">Livro \u2014 C\u00f3digo Limpo<\/a><\/b><\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><span style=\"font-size: 14pt;\">13. Refactoring<\/span><\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">V\u00e1rias vezes j\u00e1 li e escutei coisas do tipo:<\/span><\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\"><span style=\"font-weight: 400;\">\u201c<\/span><i><span style=\"font-weight: 400;\">C\u00f3digo funcionando n\u00e3o deve ser tocado.<\/span><\/i><span style=\"font-weight: 400;\">\u201d<\/span><\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">E creio que esse caminho n\u00e3o deve ser seguido \u00e0s cegas. Todo c\u00f3digo pode ser melhorado e, portanto, pode ser refatorado.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Se n\u00e3o fosse por isso, empresas como Google e Facebook n\u00e3o gastariam milhares de d\u00f3lares todos os anos, refatorando e troca de base de c\u00f3digo, pois viram que seus c\u00f3digos poderiam ser melhores.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Saiba identificar e verificar o momento no qual uma refatora\u00e7\u00e3o deve acontecer.<\/span><br><span style=\"font-size: 14pt;\"><strong><strong>&nbsp;<\/strong><\/strong><\/span><br><span style=\"font-size: 14pt;\"><b>&gt;&gt;Leitura recomendada:<\/b><\/span><br><span style=\"font-size: 14pt;\"><b><a href=\"https:\/\/refactoring.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Blog Refactoring<\/a><\/b><\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><span style=\"font-size: 14pt;\">14. Aprimore suas Soft Skills<\/span><\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Independente da profiss\u00e3o ou do trabalho a ser feito, aprimorar <a title=\"Soft skills: entenda porque elas s\u00e3o importantes para o futuro do trabalho!\" href=\"https:\/\/www.impacta.com.br\/blog\/2018\/02\/12\/soft-skills-entenda-porque-importantes-futuro-do-trabalho\/\" target=\"_blank\" rel=\"noopener noreferrer\">soft skills<\/a> deve ser tratado como um \u201cmust do it\u201d.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\"> Comunica\u00e7\u00e3o, motiva\u00e7\u00e3o, lideran\u00e7a, trabalho em equipe, intelig\u00eancia emocional, negocia\u00e7\u00e3o e outros. S\u00e3o itens que podem ser aprendidos e \u201cmasterizados\u201d tamb\u00e9m.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Um desenvolvedor Front-end que n\u00e3o consegue se comunicar com o seu colega de Design, ou que n\u00e3o sabe negociar com o seu gestor sobre a implanta\u00e7\u00e3o de uma funcionalidade, ter\u00e1 problemas no decorrer da sua carreira.<\/span><\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\"><b>&gt;&gt;Leitura recomendada:<\/b><\/span><br><span style=\"font-size: 14pt;\"><b><a href=\"https:\/\/www.amazon.com.br\/Soft-Skills-Software-Developers-Manual\/dp\/1617292397\" target=\"_blank\" rel=\"noopener noreferrer\">Livro \u2014 Soft Skills: The Software Developer&#8217;s Life Manual<\/a><\/b><\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><span style=\"font-size: 14pt;\">15. Comunidades de desenvolvimento e Open Source<\/span><\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Fique pr\u00f3ximo das comunidades de desenvolvimento, independente da linguagem sempre h\u00e1 um grupo de pessoas se reunindo para falar sobre os melhores padr\u00f5es, boas pr\u00e1ticas, tecnologias e funcionalidades novas a acerca do ambiente de desenvolvimento de uma linguagem ou framework.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Logo, h\u00e1 conhecimento sendo gerado e compartilhado por diversas pessoas. Ent\u00e3o al\u00e9m de se aprender algo novo, voc\u00ea pode tirar d\u00favidas, criar amizades e fazer networking ao se aproximar dessas comunidades.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">E em rela\u00e7\u00e3o \u00e0 <a title=\"As in\u00fameras vantagens do software livre\" href=\"https:\/\/www.impacta.com.br\/blog\/2018\/08\/24\/as-vantagens-do-software-livre\/\" target=\"_blank\" rel=\"noopener noreferrer\">Open Source<\/a>: \u00e9 outro t\u00f3pico que poderia ser feito um artigo somente para ele, mas podemos ver o poder dele por meio de diversos produtos magn\u00edficos feitos com a ajuda m\u00fatua de diferentes desenvolvedores ao redor do mundo.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Utilizando plataformas como o Github, aplica\u00e7\u00f5es, bibliotecas, frameworks e outros, s\u00e3o mantidas dia ap\u00f3s dia, com PRs (Pull requests) e cria\u00e7\u00f5es de Issues.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Fuja da sua bolha e fique pr\u00f3ximo tanto das comunidades, quanto do open source. Esteja aberto a novos conhecimentos e pr\u00e1ticas.<\/span><br><span style=\"font-size: 14pt;\"><strong><strong>&nbsp;<\/strong><\/strong><\/span><br><span style=\"font-size: 14pt;\"><b>&gt;&gt;Comunidade recomendada:<\/b><\/span><br><span style=\"font-size: 14pt;\"><b><a href=\"https:\/\/react-brasil-slack.herokuapp.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Slack do React Brasil<\/a><\/b><\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><span style=\"font-size: 14pt;\">16. Aprenda e utilize Metodologias \u00c1geis<\/span><\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Atualmente, qualquer empresa que n\u00e3o utilize um paradigma \u00e1gil em seu processo, pode est\u00e1 destinada a desenvolver algo que nunca vai ser utilizado, algo que n\u00e3o atenda as demandas do usu\u00e1rio ou que contenha in\u00fameros erros t\u00e9cnicos.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Entender as boas pr\u00e1ticas que o XP (eXtreme Programming) tr\u00e1s para um time de desenvolvimento, ou a revolu\u00e7\u00e3o que o <a title=\"Como funciona a metodologia SCRUM?\" href=\"https:\/\/www.impacta.com.br\/blog\/2017\/09\/27\/como-funciona-a-metodologia-scrum\/\" target=\"_blank\" rel=\"noopener noreferrer\">Scrum <\/a>implementa no processo em cascata, \u00e9 essencial para o desenvolvedor Front-end.<\/span><br><span style=\"font-size: 14pt;\"><strong><strong>&nbsp;<\/strong><\/strong><\/span><br><span style=\"font-size: 14pt;\"><b>&gt;&gt;Leitura recomendada:<\/b><\/span><br><span style=\"font-size: 14pt;\"><b><a href=\"https:\/\/agilemanifesto.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Manifesto \u00c1gil<\/a><\/b><\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><span style=\"font-size: 14pt;\">17. Escreva sobre o que aprendeu<\/span><\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Compartilhe os seus acertos, mas n\u00e3o se esque\u00e7a dos seus erros.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">\u00c9 preciso estar sempre ligado nas tend\u00eancias e mudan\u00e7as no ambiente, portanto est\u00e1 a todo momento consumindo conte\u00fados para se manter informado.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Por\u00e9m, com tanta informa\u00e7\u00e3o sendo processada, v\u00e1rios insights s\u00e3o gerados que podem ser \u00fateis para outros. Ou seja, escreva! Compartilhe essa informa\u00e7\u00e3o com os seus colegas e comunidade.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><span style=\"font-size: 14pt;\">18. Saiba como o Back-end funciona<\/span><\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Ter os conhecimentos t\u00e9cnicos necess\u00e1rios para realizar o seu trabalho dentro do Front-end, s\u00e3o essenciais, Ok, j\u00e1 sabemos disso. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Mas imagine a seguinte situa\u00e7\u00e3o: Voc\u00ea precisa confirmar algumas informa\u00e7\u00f5es no banco de dados antes de come\u00e7ar a implementar uma nova funcionalidade, ou fazer uma pequena refatora\u00e7\u00e3o na API para dar continuamento ao desenvolvimento.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Em todas essas situa\u00e7\u00f5es, conhecimentos no \u201cBack-end\u201d seriam necess\u00e1rios, e voc\u00ea desenvolvedor Front-end iria simplesmente parar o seu colega do <a title=\"5 habilidades que um desenvolvedor back-end deve ter\" href=\"https:\/\/www.impacta.com.br\/blog\/2019\/03\/13\/5-habilidades-que-um-desenvolvedor-back-end-deve-ter\/\" target=\"_blank\" rel=\"noopener noreferrer\">Back-end<\/a> para focar nisso? A resposta correta \u00e9 \u201cn\u00e3o\u201d.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Saber realizar pequenas chamadas ao banco, entender como back-end funciona, seu fluxo de dados ou fazer deploy de uma aplica\u00e7\u00e3o. S\u00e3o conhecimentos extremamente v\u00e1lidos e \u00fateis.<\/span><br><span style=\"font-size: 14pt;\"><strong><strong>&nbsp;<\/strong><\/strong><\/span><br><span style=\"font-size: 14pt;\"><b>&gt;&gt; Leitura recomendada: <\/b><span style=\"font-weight: 400;\"><br><\/span><a href=\"https:\/\/www.quora.com\/Should-a-front-end-developer-learn-back-end-development\" target=\"_blank\" rel=\"noopener noreferrer\"><b>Um front-end deveria aprender back-end?<\/b><\/a><\/span><br><span style=\"font-size: 14pt;\"><strong><strong>&nbsp;<\/strong><\/strong><\/span><br><span style=\"font-size: 14pt;\"><b>&gt;&gt; Leitura recomendada: <\/b><span style=\"font-weight: 400;\"><br><\/span><b><a href=\"https:\/\/blog.geekhunter.com.br\/como-comecar-em-web-back-end-do-zero\/\" target=\"_blank\" rel=\"noopener noreferrer\">Como come\u00e7ar em Back-end do 0?<\/a><\/b><\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><span style=\"font-size: 14pt;\">19. Lifelong Learning<\/span><\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Esse \u00e9 outro t\u00f3pico que, independente de ser Front-end ou Back-end, ele \u00e9 uma verdade absoluta para ambas as \u00e1reas.<\/span><br><span style=\"font-weight: 400; font-size: 14pt;\"><a title=\"Carreira em TI: conhe\u00e7a 13 profiss\u00f5es que prometem continuar crescendo\" href=\"https:\/\/www.impacta.com.br\/blog\/2019\/01\/18\/carreira-em-ti-conheca-8-profissoes-que-prometem-continuar-crescendo\/\" target=\"_blank\" rel=\"noopener noreferrer\">Tecnologia da informa\u00e7\u00e3o<\/a> \u00e9 um dos ramos de conhecimento humano que mais evoluiu nos \u00faltimos 50 anos. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Logo, entender que o voc\u00ea aprendeu hoje, daqui a pouqu\u00edssimo tempo pode ser deixado pra tr\u00e1s e dar\u00e1 lugar a uma nova tecnologia.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Um profissional de desenvolvimento eficiente precisa entender que ele ter\u00e1 que renovar seu conhecimento constantemente, e de maneira r\u00e1pida durante a sua carreira, ou ser\u00e1 deixado para tr\u00e1s com tecnologias legadas. <\/span><br><span style=\"font-size: 14pt;\"><strong><strong>&nbsp;<\/strong><\/strong><\/span><br><span style=\"font-size: 14pt;\"><b>&gt;&gt; Leitura recomendada:<\/b><span style=\"font-weight: 400;\"><br><\/span><a href=\"https:\/\/www.skillsyouneed.com\/learn\/lifelong-learning.html\" target=\"_blank\" rel=\"noopener noreferrer\"><b>Life Long Learning<\/b><span style=\"font-weight: 400;\"><br><\/span><\/a><\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong><span style=\"font-size: 14pt;\">20.Fa\u00e7a um portf\u00f3lio ou blog<\/span><\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Como o Front-end \u00e9 algo bastante acess\u00edvel ao usu\u00e1rio final, ter uma p\u00e1gina na internet contendo tudo aquilo que voc\u00ea j\u00e1 fez ou sabe, n\u00e3o \u00e9 um grande desafio.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Por isso, crie uma p\u00e1gina na web com tudo o que aprendeu e apresente seus projetos, ideias, tecnologias, diga o que tem aprendido no decorrer da sua carreira. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">\u00c9 atrav\u00e9s dessa p\u00e1gina que voc\u00ea poder\u00e1 contar ao mundo o que tem feito e o que ainda quer fazer, al\u00e9m de ser uma \u00f3tima maneira de mostrar todo seu talento.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Como falamos no in\u00edcio do artigo, <strong>n\u00e3o existe f\u00f3rmula secreta para ter sucesso como Front End em 2023<\/strong> e isso pode ser refletido nessa lista. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400; font-size: 14pt;\">Existem desenvolvedores incr\u00edveis que n\u00e3o fazem ou n\u00e3o masterizam um ou mais t\u00f3picos dessa lista, mas mesmo assim s\u00e3o excepcionais em sua profiss\u00e3o.<\/span><\/p>\n\n\n\n<p>De qualquer forma, a <strong>Impacta<\/strong> tem na sua lista de bootcamps o Front End Developer para quem quer se destacar nesse mercado promissor em 2023.<\/p>\n\n\n\n<p><strong><a href=\"https:\/\/impacta.com.br\/bootcamp\">Acesse o nosso site<\/a><\/strong> e saiba mais!<\/p>\n<div class=\"sharing-default-minimal post-bottom\"><div class=\"nectar-social default\" data-position=\"\" data-rm-love=\"0\" data-color-override=\"override\"><div class=\"nectar-social-inner\"><a href=\"#\" class=\"nectar-love\" id=\"nectar-love-14338\" title=\"Love this\"> <i class=\"icon-salient-heart-2\"><\/i><span class=\"love-text\">Love<\/span><span class=\"total_loves\"><span class=\"nectar-love-count\">0<\/span><\/span><\/a><a class='facebook-share nectar-sharing' href='#' title='Share this'> <i class='fa fa-facebook'><\/i> <span class='social-text'>Share<\/span> <\/a><a class='twitter-share nectar-sharing' href='#' title='Share this'> <i class='fa icon-salient-x-twitter'><\/i> <span class='social-text'>Share<\/span> <\/a><a class='linkedin-share nectar-sharing' href='#' title='Share this'> <i class='fa fa-linkedin'><\/i> <span class='social-text'>Share<\/span> <\/a><a class='pinterest-share nectar-sharing' href='#' title='Pin this'> <i class='fa fa-pinterest'><\/i> <span class='social-text'>Pin<\/span> <\/a><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>N\u00e3o existe f\u00f3rmula secreta ser um desenvolvedor Front End de sucesso em 2023, por\u00e9m, olhando para os padr\u00f5es de cases de carreiras bem sucedidas, \u00e9 poss\u00edvel identificar v\u00e1rias similaridades e pequenas a\u00e7\u00f5es que levaram \u00e0quele acontecimento. Isso n\u00e3o \u00e9 diferente na vida de desenvolvedores. A escolha das linguagens, frameworks, ferramentas e etc, podem ser cruciais [&hellip;]<\/p>\n","protected":false},"author":48,"featured_media":17145,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[90,724,366,523,830],"class_list":["post-14338","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","tag-desenvolvedor-front-end","tag-desenvolvedor-web","tag-desenvolvimento-web","tag-front-end","tag-linguagens"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\r\n<title>20 t\u00f3picos que todo desenvolvedor Front-end deve saber em 2023<\/title>\r\n<meta name=\"description\" content=\"O desenvolvedor front-end est\u00e1 em alta no mercado, mas para se dar bem na \u00e1rea deve estar atualizado. Confira 20 T\u00f3picos que voc\u00ea DEVE saber!\" \/>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/www.impacta.com.br\/blog\/20-topicos-bom-desenvolvedor-front-end-deveria-saber-em-2023\/\" \/>\r\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"20 t\u00f3picos que todo desenvolvedor Front-end deve saber em 2023\" \/>\r\n<meta property=\"og:description\" content=\"O desenvolvedor front-end est\u00e1 em alta no mercado, mas para se dar bem na \u00e1rea deve estar atualizado. Confira 20 T\u00f3picos que voc\u00ea DEVE saber!\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/www.impacta.com.br\/blog\/20-topicos-bom-desenvolvedor-front-end-deveria-saber-em-2023\/\" \/>\r\n<meta property=\"og:site_name\" content=\"Blog Impacta - Dicas e Not\u00edcias sobre Carreira\" \/>\r\n<meta property=\"article:published_time\" content=\"2023-02-09T14:31:00+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2023-11-01T15:46:15+00:00\" \/>\r\n<meta property=\"og:image\" content=\"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/shutterstock_280517897.jpg\" \/>\r\n\t<meta property=\"og:image:width\" content=\"850\" \/>\r\n\t<meta property=\"og:image:height\" content=\"284\" \/>\r\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\r\n<meta name=\"author\" content=\"Ot\u00e1vio Augusto\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ot\u00e1vio Augusto\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutos\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/20-topicos-bom-desenvolvedor-front-end-deveria-saber-em-2023\/\",\"url\":\"https:\/\/www.impacta.com.br\/blog\/20-topicos-bom-desenvolvedor-front-end-deveria-saber-em-2023\/\",\"name\":\"20 t\u00f3picos que todo desenvolvedor Front-end deve saber em 2023\",\"isPartOf\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/20-topicos-bom-desenvolvedor-front-end-deveria-saber-em-2023\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/20-topicos-bom-desenvolvedor-front-end-deveria-saber-em-2023\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/shutterstock_280517897.jpg\",\"datePublished\":\"2023-02-09T14:31:00+00:00\",\"dateModified\":\"2023-11-01T15:46:15+00:00\",\"author\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/86987cfb6f572036a9dc3358cebb9908\"},\"description\":\"O desenvolvedor front-end est\u00e1 em alta no mercado, mas para se dar bem na \u00e1rea deve estar atualizado. Confira 20 T\u00f3picos que voc\u00ea DEVE saber!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/20-topicos-bom-desenvolvedor-front-end-deveria-saber-em-2023\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.impacta.com.br\/blog\/20-topicos-bom-desenvolvedor-front-end-deveria-saber-em-2023\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/20-topicos-bom-desenvolvedor-front-end-deveria-saber-em-2023\/#primaryimage\",\"url\":\"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/shutterstock_280517897.jpg\",\"contentUrl\":\"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/shutterstock_280517897.jpg\",\"width\":850,\"height\":284},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/20-topicos-bom-desenvolvedor-front-end-deveria-saber-em-2023\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.impacta.com.br\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"20 t\u00f3picos que todo desenvolvedor Front-end deve saber em 2023\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#website\",\"url\":\"https:\/\/www.impacta.com.br\/blog\/\",\"name\":\"Blog Impacta - Dicas e Not\u00edcias sobre Carreira\",\"description\":\"Dicas, Not\u00edcias e Conte\u00fados sobre Carreira, Tecnologia, Design, Gest\u00e3o e Marketing. Conhe\u00e7a e Acompanhe o Blog Impacta\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.impacta.com.br\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/86987cfb6f572036a9dc3358cebb9908\",\"name\":\"Ot\u00e1vio Augusto\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/885a1e313cd952d6c90b6bfa1d0a2f69?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/885a1e313cd952d6c90b6bfa1d0a2f69?s=96&d=mm&r=g\",\"caption\":\"Ot\u00e1vio Augusto\"},\"url\":\"https:\/\/www.impacta.com.br\/blog\/author\/geek-hunter\/\"}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"20 t\u00f3picos que todo desenvolvedor Front-end deve saber em 2023","description":"O desenvolvedor front-end est\u00e1 em alta no mercado, mas para se dar bem na \u00e1rea deve estar atualizado. Confira 20 T\u00f3picos que voc\u00ea DEVE saber!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.impacta.com.br\/blog\/20-topicos-bom-desenvolvedor-front-end-deveria-saber-em-2023\/","og_locale":"pt_BR","og_type":"article","og_title":"20 t\u00f3picos que todo desenvolvedor Front-end deve saber em 2023","og_description":"O desenvolvedor front-end est\u00e1 em alta no mercado, mas para se dar bem na \u00e1rea deve estar atualizado. Confira 20 T\u00f3picos que voc\u00ea DEVE saber!","og_url":"https:\/\/www.impacta.com.br\/blog\/20-topicos-bom-desenvolvedor-front-end-deveria-saber-em-2023\/","og_site_name":"Blog Impacta - Dicas e Not\u00edcias sobre Carreira","article_published_time":"2023-02-09T14:31:00+00:00","article_modified_time":"2023-11-01T15:46:15+00:00","og_image":[{"width":850,"height":284,"url":"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/shutterstock_280517897.jpg","type":"image\/jpeg"}],"author":"Ot\u00e1vio Augusto","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Ot\u00e1vio Augusto","Est. reading time":"10 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.impacta.com.br\/blog\/20-topicos-bom-desenvolvedor-front-end-deveria-saber-em-2023\/","url":"https:\/\/www.impacta.com.br\/blog\/20-topicos-bom-desenvolvedor-front-end-deveria-saber-em-2023\/","name":"20 t\u00f3picos que todo desenvolvedor Front-end deve saber em 2023","isPartOf":{"@id":"https:\/\/www.impacta.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.impacta.com.br\/blog\/20-topicos-bom-desenvolvedor-front-end-deveria-saber-em-2023\/#primaryimage"},"image":{"@id":"https:\/\/www.impacta.com.br\/blog\/20-topicos-bom-desenvolvedor-front-end-deveria-saber-em-2023\/#primaryimage"},"thumbnailUrl":"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/shutterstock_280517897.jpg","datePublished":"2023-02-09T14:31:00+00:00","dateModified":"2023-11-01T15:46:15+00:00","author":{"@id":"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/86987cfb6f572036a9dc3358cebb9908"},"description":"O desenvolvedor front-end est\u00e1 em alta no mercado, mas para se dar bem na \u00e1rea deve estar atualizado. Confira 20 T\u00f3picos que voc\u00ea DEVE saber!","breadcrumb":{"@id":"https:\/\/www.impacta.com.br\/blog\/20-topicos-bom-desenvolvedor-front-end-deveria-saber-em-2023\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.impacta.com.br\/blog\/20-topicos-bom-desenvolvedor-front-end-deveria-saber-em-2023\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.impacta.com.br\/blog\/20-topicos-bom-desenvolvedor-front-end-deveria-saber-em-2023\/#primaryimage","url":"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/shutterstock_280517897.jpg","contentUrl":"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/shutterstock_280517897.jpg","width":850,"height":284},{"@type":"BreadcrumbList","@id":"https:\/\/www.impacta.com.br\/blog\/20-topicos-bom-desenvolvedor-front-end-deveria-saber-em-2023\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.impacta.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"20 t\u00f3picos que todo desenvolvedor Front-end deve saber em 2023"}]},{"@type":"WebSite","@id":"https:\/\/www.impacta.com.br\/blog\/#website","url":"https:\/\/www.impacta.com.br\/blog\/","name":"Blog Impacta - Dicas e Not\u00edcias sobre Carreira","description":"Dicas, Not\u00edcias e Conte\u00fados sobre Carreira, Tecnologia, Design, Gest\u00e3o e Marketing. Conhe\u00e7a e Acompanhe o Blog Impacta","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.impacta.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/86987cfb6f572036a9dc3358cebb9908","name":"Ot\u00e1vio Augusto","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/885a1e313cd952d6c90b6bfa1d0a2f69?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/885a1e313cd952d6c90b6bfa1d0a2f69?s=96&d=mm&r=g","caption":"Ot\u00e1vio Augusto"},"url":"https:\/\/www.impacta.com.br\/blog\/author\/geek-hunter\/"}]}},"acf":{"post_description":"","capa_mobile":false},"_links":{"self":[{"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/posts\/14338","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/users\/48"}],"replies":[{"embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/comments?post=14338"}],"version-history":[{"count":2,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/posts\/14338\/revisions"}],"predecessor-version":[{"id":20757,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/posts\/14338\/revisions\/20757"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/media\/17145"}],"wp:attachment":[{"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/media?parent=14338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/categories?post=14338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/tags?post=14338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}