{"id":43050,"date":"2021-05-31T08:09:51","date_gmt":"2021-05-31T06:09:51","guid":{"rendered":"https:\/\/kinqsta.com\/?p=95530&#038;preview=true&#038;preview_id=95530"},"modified":"2025-02-11T06:04:55","modified_gmt":"2025-02-11T09:04:55","slug":"ferramentas-de-desenvolvimento-web","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/","title":{"rendered":"62 \u00d3timas Ferramentas de Desenvolvimento Web"},"content":{"rendered":"<p>H\u00e1 algo rom\u00e2ntico e emocionante em abrir TextEdit ou Notepad e digitar &#8220;&lt;HTML&gt;&#8221; para dar in\u00edcio a um novo projeto. \u00c9 quantos de n\u00f3s come\u00e7aram nossa obsess\u00e3o com a codifica\u00e7\u00e3o para a web. As ferramentas de desenvolvimento web fazem mais do que apenas gravar nosso texto &#8211; elas nos ajudam a criar projetos e sobrecarregam todo o processo. Al\u00e9m disso, h\u00e1 muito mais elementos do que apenas <a href=\"https:\/\/kinqsta.com\/pt\/blog\/editar-codigo-wordpress\/\">HTML e CSS<\/a> para considerar.<\/p>\n<p>A fase de planejamento, por exemplo, \u00e9 vital. \u00c9 preciso considerar wireframing, escolhas de projeto e fluxos de trabalho colaborativos. Depois, h\u00e1 a escolha da \u00a0<a href=\"https:\/\/kinqsta.com\/pt\/blog\/php-vs-javascript\/\">estrutura ideal de JavaScript<\/a>, se deve usar um <a href=\"https:\/\/kinqsta.com\/pt\/blog\/php-editor\/\">Ambiente de Desenvolvimento Integrado (IDE)<\/a>, e muito mais.<\/p>\n<p>Neste artigo, vamos dar uma olhada em 62 ferramentas de desenvolvimento web que voc\u00ea vai querer considerar usar. Mas antes de entrarmos nisso, vamos falar sobre o que pensamos ser uma ferramenta de desenvolvimento web.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>O que consideramos uma ferramenta de desenvolvimento web<\/h2>\n<p>\u00c0 primeira vista, a categoriza\u00e7\u00e3o de uma ferramenta de desenvolvimento web parece simples. Entretanto, mesmo mergulhando na parte mais superficial, algumas considera\u00e7\u00f5es deixam a quest\u00e3o um pouco confusa.<\/p>\n<p>Por exemplo, considere se um servi\u00e7o de streaming de v\u00eddeo conta como uma ferramenta de desenvolvimento. Em uma bolha, provavelmente n\u00e3o. Entretanto, se voc\u00ea estiver usando-o para gravar sua tela para um aplicativo de projeto espec\u00edfico, ele se transforma repentinamente em uma ferramenta de colabora\u00e7\u00e3o \u00fanica.<\/p>\n<p>Em nossa opini\u00e3o, uma ferramenta de desenvolvimento web \u00e9 algo que ajuda voc\u00ea a alcan\u00e7ar os objetivos do seu projeto de forma focada. Embora isto n\u00e3o inclua linguagens de programa\u00e7\u00e3o individuais, <em>existem <\/em>subconjuntos, superconjuntos e frameworks <a href=\"https:\/\/kinqsta.com\/pt\/blog\/linguagens-de-script\/\">como o TypeScript<\/a> que se sobrep\u00f5em \u00e0 linha. Se voc\u00ea quiser <a href=\"https:\/\/kinqsta.com\/pt\/blog\/salario-desenvolvedor-web\/#what-do-you-need-to-become-a-web-developer\">ganhar muito dinheiro<\/a>, \u00e9 vital estar atento a estes aspectos.<\/p>\n<p>Para outro exemplo, <a href=\"https:\/\/kinqsta.com\/pt\/blog\/git-vs-github\/\">considere o Git<\/a>. Pode-se dizer que este sistema de controle de vers\u00e3o (VCS) cobre muitas coisas. Uma linguagem espec\u00edfica \u00e9 usada para executar comandos, e a funcionalidade b\u00e1sica oferece muitas possibilidades em termos de desenvolvimento web. Entretanto, voc\u00ea tamb\u00e9m pode us\u00e1-lo como uma ferramenta de aprendizagem, incluindo a navega\u00e7\u00e3o em logs de rastreamento de problemas e compromissos.<\/p>\n<p>Em geral, uma ferramenta de desenvolvimento web pode ser praticamente qualquer coisa que fa\u00e7a seu projeto funcionar de forma eficiente e produtiva. Voc\u00ea notar\u00e1 esta diversidade na lista de ferramentas.<\/p>\n\n<h2>Como as ferramentas de desenvolvimento web podem agilizar seu fluxo de trabalho<\/h2>\n<p>Antes das pr\u00f3ximas palavras: &#8220;<a href=\"https:\/\/kotaku.com\/crunch-time-why-game-developers-work-such-insane-hours-1704744577\">crunch time<\/a>&#8220;.<\/p>\n<p>Sim, esta temida frase grita por ferramentas de desenvolvimento web que economizam tempo para salvar o dia. As estat\u00edsticas mostram que <a href=\"https:\/\/insights.stackoverflow.com\/survey\/2020#work-overtime\">mais projetos utilizam o crunch<\/a> como um padr\u00e3o, e muitas ind\u00fastrias de desenvolvimento ainda o utilizam hoje.<\/p>\n<p>Independentemente de sua empresa usar ou precisar de crunch e horas extras, as ferramentas de desenvolvimento web ainda podem ajudar. Estas ferramentas fazem o trabalho pesado e automatizam o trabalho mundano que come em seu dia. Como tal, elas oferecem um impulso org\u00e2nico \u00e0 sua produtividade.<\/p>\n<p>Entretanto, eles tamb\u00e9m podem oferecer um b\u00f4nus se voc\u00ea operar sob uma estrutura de projeto \u00e1gil, <a href=\"https:\/\/www.scrum.org\/resources\/what-is-scrum\/\">como Scrum<\/a>. Por exemplo, considere como uma ferramenta\u00a0 <a href=\"https:\/\/jsfiddle.net\/\">como o JSFiddle<\/a> pode ajudar voc\u00ea a compartilhar trechos com outras equipes durante a cauda de um sprint, pronto para o pr\u00f3ximo.<\/p>\n<p>Al\u00e9m disso, enquanto os stand-ups di\u00e1rios n\u00e3o v\u00e3o a lugar algum, um <a href=\"https:\/\/kinqsta.com\/pt\/blog\/slack-vs-discord\/\">servidor Discord<\/a> ou <a href=\"https:\/\/kinqsta.com\/pt\/blog\/como-usar-slack\/\">c<\/a><a href=\"https:\/\/kinqsta.com\/pt\/blog\/como-usar-slack\/\">anal Slack<\/a> poderia oferecer uma melhor maneira de focar e alinhar um conjunto de tarefas futuras, longe da press\u00e3o dos objetivos do seu sprint atual.<\/p>\n<p>De modo geral, as ferramentas de desenvolvimento web s\u00e3o tanto sobre planejamento quanto sobre execu\u00e7\u00e3o.<\/p>\n<h2>Como escolher a pilha de desenvolvimento correta para seu projeto<\/h2>\n<p>Uma grande ferramenta de desenvolvimento da web vale seu peso em ouro em um <a href=\"https:\/\/www.apple.com\/macbook-air\/\">M1-powered MacBook<\/a> ouro rosa. Como tal, obter a mistura certa de ferramentas para seu projeto espec\u00edfico \u00e9 crucial para a constru\u00e7\u00e3o de uma base s\u00f3lida para o trabalho.<\/p>\n<p>Se \u00e9 algo que voc\u00ea n\u00e3o considerou antes, uma <a href=\"https:\/\/kinqsta.com\/pt\/blog\/trello-vs-asana\/\">etapa inicial de planejamento<\/a> se revelar\u00e1 inestim\u00e1vel. Levar algum tempo para se ajustar \u00e0s ferramentas que voc\u00ea usar\u00e1 atrasa a fase de codifica\u00e7\u00e3o do projeto. No entanto, desta vez, voc\u00ea receber\u00e1 de volta mais tarde, pois haver\u00e1 menos problemas potenciais relacionados ao software. Voc\u00ea tamb\u00e9m ver\u00e1 um n\u00edvel de sa\u00edda mais consistente (uma vez que todos estar\u00e3o na mesma p\u00e1gina).<\/p>\n<h3>Considera\u00e7\u00f5es para a escolha de sua pilha de desenvolvimento<\/h3>\n<p>A escolha da <a href=\"https:\/\/medium.com\/swlh\/what-is-a-technology-stack-choosing-the-right-tech-stack-for-your-web-project-3f295cf60f10\">pilha certa<\/a> para o projeto se resume ao seguinte:<\/p>\n<ul>\n<li><strong>Complexidade: <\/strong>Considere a complexidade de sua entrega, pois isso determinar\u00e1 a complexidade da pilha.<\/li>\n<li><strong>Escalabilidade: <\/strong>Se seu projeto \u00e9 para uma empresa local, isto precisar\u00e1 de solu\u00e7\u00f5es diferentes para uma empresa global. Como tal, voc\u00ea precisar\u00e1 de uma pilha mais escal\u00e1vel para atingir seus objetivos.<\/li>\n<li><strong>Seguran\u00e7a: <\/strong>\u00c9 quase desnecess\u00e1rio dizer que o que voc\u00ea escolher n\u00e3o deve comprometer a <a href=\"https:\/\/kinqsta.com\/pt\/blog\/usar-ssh\/\">seguran\u00e7a do usu\u00e1rio e do site<\/a>.<\/li>\n<li><strong>Custo: <\/strong>\u00c9 claro que ningu\u00e9m gosta de gastar demais, e se houver or\u00e7amentos apertados envolvidos, isto ter\u00e1 mais um fator do que um livro de cheques em branco.<\/li>\n<\/ul>\n<p>H\u00e1 duas \u00e1reas em que voc\u00ea pode dividir as tecnologias:<\/p>\n<ul>\n<li><strong>Lado do servidor: <\/strong>Aqui, voc\u00ea vai querer olhar para as tecnologias back-end que voc\u00ea usa. Por exemplo, voc\u00ea vai querer olhar para sua <a href=\"https:\/\/kinqsta.com\/pt\/clientes\/local-digital\/\">escolha de hospedagem<\/a> e servidor web, <a href=\"https:\/\/kinqsta.com\/pt\/blog\/o-que-e-mysql\/\">valor chave e armazenamento SQL<\/a>, qualquer aplicativo e estruturas de automa\u00e7\u00e3o que voc\u00ea vai usar, e, \u00e9 claro, a linguagem de programa\u00e7\u00e3o.<\/li>\n<li><strong>Lado do cliente: <\/strong>Sua escolha de ferramentas front-end provavelmente ser\u00e1 mais simples, especialmente em termos das linguagens utilizadas. Se <a href=\"https:\/\/kinqsta.com\/pt\/blog\/editar-codigo-wordpress\/\">HTML, CSS, e Jav<\/a><a href=\"https:\/\/kinqsta.com\/pt\/blog\/editar-codigo-wordpress\/\">aScript<\/a> estiverem presentes, a escolha da estrutura JavaScript (e da estrutura de automa\u00e7\u00e3o) ter\u00e1 que ser considerada.<\/li>\n<\/ul>\n<p>Quando se trata de algumas <a href=\"https:\/\/rubygarage.org\/blog\/technology-stack-for-web-development#article_title_15\">pilhas de desenvolvimento do mundo real<\/a>, voc\u00ea notar\u00e1 que muitos sites grandes usam alguma combina\u00e7\u00e3o de JavaScript e <a href=\"https:\/\/reactjs.org\/\">React.js<\/a>, ao lado do <a href=\"https:\/\/kinqsta.com\/pt\/blog\/o-que-e-nginx\/\">Nginx<\/a>. Voc\u00ea tamb\u00e9m ver\u00e1 <a href=\"https:\/\/kinqsta.com\/pt\/blog\/memcached-vs-redis\/#what-is-memcached\">Memcached<\/a>, <a href=\"https:\/\/kinqsta.com\/pt\/docs\/hospedagem-de-wordpress\/cache\/cache-redis\/\">Redis<\/a>, e <a href=\"https:\/\/rubyonrails.org\/\">Ruby on Rails<\/a> nas pilhas de desenvolvimento.<\/p>\n<h2>62 \u00f3timas ferramentas de desenvolvimento web para utilizar<\/h2>\n<p>Sem mais delongas, vejamos a lista de ferramentas de desenvolvimento web que recomendamos utilizar. N\u00f3s as organizamos em categorias, mas caso contr\u00e1rio, as ferramentas n\u00e3o est\u00e3o em ordem espec\u00edfica. Se voc\u00ea estiver com pressa, sinta-se \u00e0 vontade para pular para uma se\u00e7\u00e3o espec\u00edfica listada abaixo.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"circle\" selector=\"h3\" count-number=\"-1\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Ambientes de desenvolvimento local<\/h3>\n<p>Um ambiente de desenvolvimento local \u00e9 uma parte essencial de qualquer pilha de desenvolvimento. Entretanto, ele \u00e9 particularmente vital para o desenvolvimento da web. Aqui est\u00e3o algumas das mais proeminentes ferramentas de desenvolvimento local.<\/p>\n<h4>1. DevKinsta<\/h4>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/devkinsta-splash.png\" alt=\"A tela de respingo DevKinsta.\" width=\"1500\" height=\"573\"><figcaption class=\"wp-caption-text\">DevKinsta.<\/figcaption><\/figure>\n<p>Podemos ser tendenciosos, mas a <a href=\"https:\/\/kinqsta.com\/pt\/devkinsta\/\">DevKinsta<\/a> pode se tornar a ferramenta n\u00famero um de desenvolvimento web.<\/p>\n<p>Grave isso &#8211; <em>somos <\/em>tendenciosos, e estamos orgulhosos do que lan\u00e7amos!<\/p>\n<p>Para os usu\u00e1rios n\u00e3o iniciantes, DevKinsta \u00e9 uma forma de ajudar voc\u00ea a criar as <a href=\"https:\/\/kinqsta.com\/pt\/blog\/instalar-wordpress-localmente\/\">instala\u00e7\u00f5es locais do WordPress<\/a> em um piscar de olhos. \u00c9 um kit completo que permite projetar, desenvolver e implantar um site WordPress para m\u00e1quinas MacOS e Windows (com uma vers\u00e3o Linux no pipeline).<\/p>\n<p>Voc\u00ea \u00e9 capaz de adaptar sua instala\u00e7\u00e3o ao seu projeto atual. Por exemplo, seu &#8220;servidor&#8221; poderia usar Nginx ou Apache, sua escolha de vers\u00e3o PHP, executar o <a href=\"https:\/\/kinqsta.com\/pt\/blog\/mariadb-vs-mysql\/\">MariaDB ou MySQL<\/a>, e muito mais:<\/p>\n<figure style=\"width: 1200px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/devkinsta-php-options.png\" alt=\"As op\u00e7\u00f5es de configura\u00e7\u00e3o do DevKinsta.\" width=\"1200\" height=\"649\"><figcaption class=\"wp-caption-text\">As op\u00e7\u00f5es de configura\u00e7\u00e3o do DevKinsta.<\/figcaption><\/figure>\n<p>H\u00e1 mais debaixo do cap\u00f4 tamb\u00e9m. Voc\u00ea tamb\u00e9m pode <a href=\"https:\/\/kinqsta.com\/pt\/blog\/wordpress-debug\/\">depurar e testar<\/a> e-mails atrav\u00e9s do <a href=\"https:\/\/kinqsta.com\/pt\/blog\/porta-smtp\/\">servidor SMTP<\/a> integrado, e para gerenciamento de banco de dados, voc\u00ea pode usar a <a href=\"https:\/\/kinqsta.com\/pt\/blog\/adminer\/\">poderosa ferramenta Adminer<\/a>:<\/p>\n<figure style=\"width: 1200px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/devkinsta-adminer.png\" alt=\"Gerente de banco de dados da DevKinsta, com poder de administra\u00e7\u00e3o.\" width=\"1200\" height=\"624\"><figcaption class=\"wp-caption-text\">Gerente de banco de dados da DevKinsta, com poder de administra\u00e7\u00e3o.<\/figcaption><\/figure>\n<p>Em geral, pensamos que a DevKinsta \u00e9 ideal para o desenvolvimento moderno do WordPress. Ele pode se encaixar diretamente em seu fluxo de trabalho.<\/p>\n<p>Criamos esta ferramenta com desenvolvedores, designers, freelancers e ag\u00eancias em mente. No entanto, praticamente qualquer pessoa com necessidades di\u00e1rias de desenvolvimento encontrar\u00e1 valor no DevKinsta &#8211; especialmente (mas n\u00e3o exclusivamente) usu\u00e1rios Kinsta.<\/p>\n<p>Al\u00e9m disso, a DevKinsta \u00e9 totalmente gratuita!<\/p>\n<h4>2. MAMP<\/h4>\n<figure style=\"width: 1000px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/mamp-logo.png\" alt=\"O logotipo da MAMP.\" width=\"1000\" height=\"204\"><figcaption class=\"wp-caption-text\">O logotipo da MAMP.<\/figcaption><\/figure>\n<p>Voc\u00ea pensaria que as ferramentas cl\u00e1ssicas para criar e implantar p\u00e1ginas da web est\u00e3o mortas e enterradas, dada a chegada de ferramentas mais r\u00e1pidas de caixa de areia. Entretanto, as pilhas tradicionais de servi\u00e7os web, tais como <a href=\"https:\/\/help.ubuntu.com\/community\/ApacheMySQLPHP\">LAMP<\/a>, <a href=\"https:\/\/www.mamp.info\/en\/mac\/\">MAMP<\/a>, e <a href=\"https:\/\/www.apachefriends.org\/download.html\">XAMPP<\/a>, ainda est\u00e3o indo bem.<\/p>\n<p>Normalmente, eles combinam um Sistema Operacional (SO) &#8211; Linux, macOS ou Windows &#8211; junto com o <a href=\"https:\/\/kinqsta.com\/pt\/blog\/nginx-vs-apache\/\">servidor web Apache<\/a>, banco de dados MySQL e linguagens de programa\u00e7\u00e3o Python, PHP e Perl em uma pilha. Como tal, uma pilha de servi\u00e7os web como esta ainda ser\u00e1 utilizada em um futuro pr\u00f3ximo.<\/p>\n<p>MAMP \u00e9 a vers\u00e3o espec\u00edfica para MacOS da ferramenta. Esta abordagem permite instalar uma pilha e trabalhar no projeto e implanta\u00e7\u00e3o. Embora o processo possa ser mais longo do que as configura\u00e7\u00f5es mais modernas, ainda h\u00e1 um n\u00edvel similar de flexibilidade sob o cap\u00f4 &#8211; ou pelo menos, o potencial est\u00e1 l\u00e1.<\/p>\n<p>Enquanto em uma ferramenta como a DevKinsta, voc\u00ea seleciona a partir de uma interface gr\u00e1fica de usu\u00e1rio (GUI), com uma pilha de servi\u00e7os web, voc\u00ea tem que instalar as adi\u00e7\u00f5es necess\u00e1rias manualmente. Por exemplo, n\u00e3o h\u00e1 uma maneira integrada de girar um site WordPress sem <a href=\"https:\/\/kinqsta.com\/pt\/blog\/o-que-e-localhost\/\">&#8220;implante o seu pr\u00f3prio&#8221;<\/a>. \u00c9 uma situa\u00e7\u00e3o semelhante com o <a href=\"https:\/\/documentation.mamp.info\/en\/MAMP-PRO-Windows\/Servers-and-Services\/Postfix\/\">teste de e-mail<\/a>.<\/p>\n<p>Como com outras ferramentas de ambiente de desenvolvimento local, o MAMP \u00e9 totalmente gratuito. Entretanto, h\u00e1 tamb\u00e9m uma <a href=\"https:\/\/www.mamp.info\/en\/mamp-pro\/\">vers\u00e3o premium do MAMP<\/a> tanto para Windows quanto para Mac, que amplia a funcionalidade e fornece uma ferramenta de desenvolvimento web abrangente e robusta.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/mamp-pro.png\" alt=\"O painel do MAMP Pro.\" width=\"1500\" height=\"949\"><figcaption class=\"wp-caption-text\">O painel do MAMP Pro.<\/figcaption><\/figure>\n<p>Devido \u00e0 flexibilidade e ao pre\u00e7o, as pilhas cl\u00e1ssicas de servi\u00e7os web ainda est\u00e3o em muitos computadores de desenvolvedores. Os aficionados da linha de comando naturalmente gravitar\u00e3o nesta solu\u00e7\u00e3o, especialmente se voc\u00ea adora usar gerentes de pacotes como <a href=\"http:\/\/brew.sh\">Homebrew<\/a>, <a href=\"https:\/\/www.flatpak.org\/\">Flatpak<\/a>, ou <a href=\"https:\/\/ninite.com\/\">Ninite<\/a>.<\/p>\n<p>Naturalmente, os desenvolvedores Apache tamb\u00e9m usar\u00e3o essas pilhas, assim como os desenvolvedores MySQL e Python ou PHP. Por extens\u00e3o, os desenvolvedores do WordPress tamb\u00e9m se sentir\u00e3o em casa aqui.<\/p>\n<h4>3. XAMPP<\/h4>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/xampp.png\" alt=\"O aplicativo XAMPP.\" width=\"900\" height=\"492\"><figcaption class=\"wp-caption-text\">O aplicativo XAMPP.<\/figcaption><\/figure>\n<p><a href=\"https:\/\/www.apachefriends.org\/download.html\">XAMPP<\/a> \u00e9 outra pilha de servi\u00e7os web que recebe muito amor dos desenvolvedores de PHP, incluindo aqueles que criam produtos WordPress. O &#8220;X&#8221; no nome representa a natureza multiplataforma da ferramenta. Ele oferece instaladores para m\u00e1quinas Windows, MacOS e Linux:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/xampp-downloads.png\" alt=\"A p\u00e1gina de downloads do XAMPP.\" width=\"900\" height=\"110\"><figcaption class=\"wp-caption-text\">A p\u00e1gina de downloads do XAMPP.<\/figcaption><\/figure>\n<p>Embora costumava haver uma diferen\u00e7a entre as v\u00e1rias pilhas de servi\u00e7os web, atualiza\u00e7\u00f5es e melhorias constantes equalizaram o campo. Ainda assim, o XAMPP tem um par de truques \u00fanicos na manga.<\/p>\n<p>Por exemplo, o MySQL n\u00e3o \u00e9 mais o Sistema de Gerenciamento de Banco de Dados Relacionais (RDMS) padr\u00e3o. Ao inv\u00e9s disso, o XAMPP utiliza o MariaDB. \u00c9 provavelmente uma representa\u00e7\u00e3o mais precisa de um servidor de produ\u00e7\u00e3o, dada a mudan\u00e7a para outras solu\u00e7\u00f5es ap\u00f3s a <a href=\"https:\/\/www.tecmint.com\/the-story-behind-acquisition-of-mysql-and-the-rise-of-mariadb\/\">aquisi\u00e7\u00e3o da Oracle<\/a>.<\/p>\n<p>Al\u00e9m disso, h\u00e1 um instalador de aplicativos web dentro do pacote XAMPP. <a href=\"https:\/\/bitnami.com\/stack\/xampp\">Bitnami<\/a> \u00e9 similar a solu\u00e7\u00f5es como <a href=\"https:\/\/www.softaculous.com\/\">Softaculous<\/a>, mas Bitnami \u00e9 espec\u00edfico para o XAMPP:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/bitnami.png\" alt=\"A p\u00e1gina inicial de Bitnami.\" width=\"900\" height=\"490\"><figcaption class=\"wp-caption-text\">A p\u00e1gina inicial de Bitnami.<\/figcaption><\/figure>\n<p>Embora haja <a href=\"https:\/\/www.apachefriends.org\/add-ons.html\">muitos aplicativos dispon\u00edveis<\/a>, voc\u00ea provavelmente estar\u00e1 mais interessado no instalador do WordPress. Ainda assim, h\u00e1 muitos complementos para escolher, fazendo do XAMPP uma solu\u00e7\u00e3o flex\u00edvel para o desenvolvimento local.<\/p>\n<h3>Editores de texto e c\u00f3digo<\/h3>\n<p>A maioria dos desenvolvedores adora discutir sobre qual editor de c\u00f3digo voc\u00ea deve usar. Ok, somos hiperb\u00f3licos, mas <em>h\u00e1 <\/em>muitas opini\u00f5es sobre o assunto, com uma fervorosa base de f\u00e3s para cada editor.<\/p>\n<p>Entretanto, se as <a href=\"https:\/\/insights.stackoverflow.com\/survey\/2019#technology\">pesquisas estiverem corretas<\/a>, voc\u00ea provavelmente est\u00e1 usando <a href=\"https:\/\/www.sublimetext.com\/\">Sublime Text<\/a>, <a href=\"https:\/\/code.visualstudio.com\/\">Visual Studio Code (VSCode)<\/a>, ou <a href=\"https:\/\/www.jetbrains.com\/idea\/\">IntelliJ IDEA<\/a>. Faz sentido, j\u00e1 que estas tr\u00eas ferramentas escalam desde a simples edi\u00e7\u00e3o de texto at\u00e9 o Ambiente de Desenvolvimento Integrado (IDE) de pleno direito. No entanto, h\u00e1 outras que tamb\u00e9m merecem uma men\u00e7\u00e3o. Vamos dar uma olhada em algumas delas.<\/p>\n<h4>4. Visual Studio Code<\/h4>\n<p>Desde seu lan\u00e7amento em 2015, o uso do <a href=\"https:\/\/code.visualstudio.com\/\">Visual Studio Code<\/a> explodiu em todos os desktops de desenvolvimento de todas as listras.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/vscode-editor.png\" alt=\"O Editor de C\u00f3digo do Visual Studio.\" width=\"1500\" height=\"1162\"><figcaption class=\"wp-caption-text\">O Editor de C\u00f3digo do Visual Studio.<\/figcaption><\/figure>\n<p>\u00c9 um editor de c\u00f3digo fonte aberto desenvolvido pela Microsoft que oferece o suficiente na caixa para ser considerado uma IDE. Sem d\u00favida, ele oferece funcionalidade suficiente para capturar mais da metade do mercado &#8211; <a href=\"https:\/\/insights.stackoverflow.com\/survey\/2019#technology\">55% dos desenvolvedores web<\/a> usam Visual Studio Code diariamente.<\/p>\n<p>Em sua configura\u00e7\u00e3o padr\u00e3o, o Visual Studio Code \u00e9, antes de tudo, um editor de texto. Entretanto, quando acoplado \u00e0 sua biblioteca de extens\u00e3o, ele se torna modular e flex\u00edvel o suficiente para atender a qualquer uma de suas necessidades de desenvolvimento:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/code-extensions-llibrary.png\" alt=\"A biblioteca de extens\u00f5es do Visual Studio Code.\" width=\"900\" height=\"697\"><figcaption class=\"wp-caption-text\">A biblioteca de extens\u00f5es do Visual Studio Code.<\/figcaption><\/figure>\n<p>Isso significa que voc\u00ea pode instalar linters e fixadores para sua linguagem escolhida (sim, ESLint e PHP CS Fixer est\u00e3o l\u00e1), juntamente com Docker e extens\u00f5es Vagrant, e muito mais.<\/p>\n<p>Por falar em linguagem, o Visual Studio Code suporta JavaScript, Node.js, e TypeScript out of the box. Entretanto, o ecossistema de extens\u00e3o \u00e9 t\u00e3o rico que voc\u00ea ser\u00e1 capaz de encontrar algo que suporte a linguagem que voc\u00ea est\u00e1 usando.<\/p>\n<p>Al\u00e9m disso, voc\u00ea tamb\u00e9m encontrar\u00e1 uma integra\u00e7\u00e3o de alto n\u00edvel com outros produtos Microsoft, mais notadamente o <a href=\"https:\/\/insights.stackoverflow.com\/survey\/2019#technology\">GitHub<\/a>:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/code-vcs.png\" alt=\"O Visual Studio Code tem uma integra\u00e7\u00e3o dedicada do VCS com o GitHub.\" width=\"900\" height=\"247\"><figcaption class=\"wp-caption-text\">O Visual Studio Code tem uma integra\u00e7\u00e3o dedicada do VCS com o GitHub.<\/figcaption><\/figure>\n<p>O Visual Studio \u00e9 completamente gratuito e, dado o conjunto de recursos, \u00e9 ideal para muitos. Consideramos o VSCode como um excelente meio termo entre o IDEA e o Sublime Text. Por falar nisso, vejamos a seguir o \u00faltimo.<\/p>\n<h4>5. Sublime Text<\/h4>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/sublime-text.png\" alt=\"O aplicativo Sublime Text.\" width=\"900\" height=\"676\"><figcaption class=\"wp-caption-text\">O aplicativo Sublime Text.<\/figcaption><\/figure>\n<p>O <a href=\"https:\/\/www.sublimetext.com\/\">Sublime Text<\/a> \u00e9 um dos pilares dentro do mundo dos editores de texto. \u00c9 mais parecido do que a maioria das outras solu\u00e7\u00f5es, embora sua apar\u00eancia desmente o poder sob o cap\u00f4.<\/p>\n<p>Por exemplo, voc\u00ea ver\u00e1 muito do que o Sublime Text oferece em outros concorrentes. A Paleta de Comando \u00e9 algo que voc\u00ea ver\u00e1 em muitas solu\u00e7\u00f5es, pois \u00e9 simples de usar.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/sublime-command-palette.png\" alt=\"Paleta de Comando do Sublime Text.\" width=\"900\" height=\"676\"><figcaption class=\"wp-caption-text\">Paleta de Comando do Sublime Text.<\/figcaption><\/figure>\n<p>Al\u00e9m disso, h\u00e1 poderosos atalhos de teclado de edi\u00e7\u00e3o, como <a href=\"https:\/\/www.sublimetext.com\/docs\/3\/column_selection.html\">fazer m\u00faltiplas sele\u00e7\u00f5es<\/a> para editar v\u00e1rias colunas ao mesmo tempo. Al\u00e9m disso, o recurso <em>Goto Anything <\/em>oferece combina\u00e7\u00f5es semelhantes a Vim de atalhos de teclado para atravessar seus arquivos:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/sublime-goto-anything.png\" alt=\"O Sublime Text pode combinar teclas para ajud\u00e1-lo a navegar.\" width=\"900\" height=\"676\"><figcaption class=\"wp-caption-text\">O Sublime Text pode combinar teclas para ajud\u00e1-lo a navegar.<\/figcaption><\/figure>\n<p>O Sublime Text \u00e9 uma ferramenta Premium com um per\u00edodo experimental muito liberal. Pode ser considerado gratuito, mas para devolver ao desenvolvedor, voc\u00ea deve <a href=\"https:\/\/www.sublimehq.com\/store\/text\">adquirir uma licen\u00e7a<\/a> para uso prolongado.<\/p>\n<p>Em nossa opini\u00e3o, para muitos codificadores menores ou hobbyistas, o Sublime Text oferece uma grande Experi\u00eancia do Usu\u00e1rio (UX), fornecendo o essencial. Ele continua a encontrar favor entre muitos desenvolvedores por seus visuais agrad\u00e1veis, layout sem alarde e extensibilidade.<\/p>\n<h4>6. Atom<\/h4>\n<p>Em certo momento, <a href=\"http:\/\/atom.io\">Atom<\/a> desfrutou de um uso pesado entre os desenvolvedores. No entanto, desde que o Visual Studio Code chegou, ele tem visto menos ado\u00e7\u00e3o. \u00c9 uma pena porque \u00e9 um grande editor de c\u00f3digo que \u00e9 adequado para muitos aplicativos diferentes.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/atom.png\" alt=\"O aplicativo Atom.\" width=\"900\" height=\"705\"><figcaption class=\"wp-caption-text\">O aplicativo Atom.<\/figcaption><\/figure>\n<p>\u00c9 um aplicativo desenvolvido pela GitHub, o que pode explicar porque ele foi empurrado para baixo na ordem de bicadas na Microsoft. Entretanto, ele \u00e9 atualizado regularmente e pode ser considerado uma vers\u00e3o alternativa do Visual Studio Code.<\/p>\n<p>A edi\u00e7\u00e3o de texto \u00e9 funcional, e como seu irm\u00e3o maior, tem integra\u00e7\u00e3o GitHub embutida. H\u00e1 tamb\u00e9m muitos complementos chamados &#8220;pacotes&#8221;:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/atom-package-manager.png\" alt=\"Instalador de pacotes do Atom.\" width=\"900\" height=\"705\"><figcaption class=\"wp-caption-text\">Instalador de pacotes do Atom.<\/figcaption><\/figure>\n<p>H\u00e1 muito dispon\u00edvel para ajudar a adaptar o Atom ao seu fluxo de trabalho e projetos. Atom inclui v\u00e1rios temas para escolher, e alguns, como o One Dark, s\u00e3o t\u00e3o populares que encontraram seu caminho para outros editores tamb\u00e9m:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/atom-one-dark.png\" alt=\"O tema One Dark do \u00c1tomo.\" width=\"900\" height=\"705\"><figcaption class=\"wp-caption-text\">O tema One Dark do \u00c1tomo.<\/figcaption><\/figure>\n<p>Atom \u00e9 um editor de c\u00f3digo funcional que merece uma tentativa. Entretanto, como o Atom \u00e9 <a href=\"https:\/\/www.electronjs.org\/\">constru\u00eddo sobre Electron<\/a> (sem trocadilho), alguns usu\u00e1rios t\u00eam reclamado de arquivos grandes e projetos em execu\u00e7\u00e3o lenta. Como tal, sugerimos que \u00e9 bom para projetos menores e scripts r\u00e1pidos (especialmente com o pacote de terminais embutido), mas pode n\u00e3o ser o melhor para trabalhos complexos.<\/p>\n<h4>7. Notepad++<\/h4>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/notepad-plus-plus.png\" alt=\"A p\u00e1gina inicial do Notepad++\" width=\"900\" height=\"519\"><figcaption class=\"wp-caption-text\">A p\u00e1gina inicial do Notepad++<\/figcaption><\/figure>\n<p>Logo de cara, vale a pena afirmar que o <a href=\"https:\/\/notepad-plus-plus.org\/\">Notepad++<\/a> pode n\u00e3o substituir nenhum dos editores de c\u00f3digo &#8220;big boy&#8221; que voc\u00ea j\u00e1 usa, tais como IntelliJ IDEA ou Visual Studio Code. Entretanto, ele lhe dar\u00e1 mais poder sob o cap\u00f4 para scripts simples e extens\u00f5es gerais de edi\u00e7\u00e3o de texto.<\/p>\n<p>Dependendo de seus projetos, pode ser tentado a mudar. Apesar de sua simplicidade, o Notepad++ \u00e9 utilizado em uma grande variedade de projetos.<\/p>\n<p>\u00c9 um editor de c\u00f3digo somente para Windows, o que explica o elemento &#8220;plus-plus&#8221; do seu nome. Naturalmente, o <a href=\"https:\/\/www.microsoft.com\/en-us\/p\/windows-notepad\/9msmlrh6lzf3?activetab=pivot:overviewtab\">Notepad<\/a> \u00e9 um editor de texto sem nenhum absurdo encontrado por padr\u00e3o nas instala\u00e7\u00f5es Windows. O Notepad++ se parece com seu irm\u00e3o, mas tamb\u00e9m inclui recursos espec\u00edficos de desenvolvimento, como por exemplo:<\/p>\n<ul>\n<li>Janelas com abas e divis\u00f3rias<\/li>\n<li>Suporte para quase <a href=\"https:\/\/npp-user-manual.org\/docs\/programing-languages\/\">80 linguagens de programa\u00e7\u00e3o<\/a><\/li>\n<li>Funcionalidade de <a href=\"https:\/\/npp-user-manual.org\/docs\/auto-completion\/\">auto-completamento<\/a><\/li>\n<li>Uma lista de fun\u00e7\u00f5es, que oferece uma excelente maneira de visualizar todas as fun\u00e7\u00f5es utilizadas em um arquivo num relance<\/li>\n<\/ul>\n<p>Al\u00e9m disso, o Notepad++ \u00e9 flex\u00edvel quando se trata de gerenciamento de projetos. Ele suporta tr\u00eas abordagens diferentes: sess\u00f5es, espa\u00e7os de trabalho e projetos. Assim que voc\u00ea come\u00e7ar a pesquisar o Notepad++, voc\u00ea ver\u00e1 que pode us\u00e1-lo para projetos mais extensos do que scripts de uma p\u00e1gina.<\/p>\n<p>Pensamos que o Notepad++ vai se adequar aos desenvolvedores que desejam uma grande funcionalidade, que tamb\u00e9m \u00e9 personaliz\u00e1vel. Ao ser usado, ele tem aquela vibra\u00e7\u00e3o de c\u00f3digo aberto Vim, que vai se adequar mais a certos tipos de projetos do que a outros.<\/p>\n<h4>8. O Conjunto JetBrains<\/h4>\n<p>Quando se trata de IDEs de desenvolvimento, o <a href=\"http:\/\/jetbrains.com\/\">conjunto de solu\u00e7\u00f5es JetBrains<\/a> estar\u00e1 no topo (ou muito pr\u00f3ximo) de sua lista. O modelo de neg\u00f3cios \u00e9 inteligente, pois embora haja muitos editores dispon\u00edveis na JetBrains, todos eles s\u00e3o na verdade &#8220;subconjuntos&#8221; do seu editor de marquises, <a href=\"https:\/\/www.jetbrains.com\/idea\/\">IntelliJ IDEA<\/a>.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/intellij-idea.png\" alt=\"IntelliJ IDEA \u00e9 uma IDEA Java l\u00edder.\" width=\"900\" height=\"564\"><figcaption class=\"wp-caption-text\">IntelliJ IDEA \u00e9 uma IDEA Java l\u00edder.<\/figcaption><\/figure>\n<p>IDEA se fatura como uma IDE Java. Ela suporta praticamente todas as funcionalidades de outras ferramentas IDE em sua gama. E, como tal, tamb\u00e9m suporta muitas linguagens de programa\u00e7\u00e3o.<\/p>\n<p>Por exemplo, <a href=\"https:\/\/www.jetbrains.com\/pycharm\/\">PyCharm<\/a> rasga a maior parte da funcionalidade Python do IDEA e a empacota como sua pr\u00f3pria ferramenta. Voc\u00ea tamb\u00e9m encontrar\u00e1 o <a href=\"https:\/\/www.jetbrains.com\/phpstorm\/\">phpStorm<\/a> e o <a href=\"https:\/\/www.jetbrains.com\/webstorm\/\">WebStorm<\/a> fazendo a mesma coisa.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/pycharm.png\" alt=\"PyCharm \u00e9 uma IDE espec\u00edfica de Python que \u00e9 popular no espa\u00e7o de linguagem.\" width=\"900\" height=\"564\"><figcaption class=\"wp-caption-text\">PyCharm \u00e9 uma IDE espec\u00edfica de Python que \u00e9 popular no espa\u00e7o de linguagem.<\/figcaption><\/figure>\n<p>Usando IDEA \u00e9 uma brisa &#8211; JetBrains fez um \u00f3timo trabalho para que voc\u00ea codificasse em vez de se arrastar em configura\u00e7\u00f5es e ajustes. Pode ser uma surpresa, mas a linha entre o uso de um editor de linha de comando como o Vim e o uso de IDEA \u00e9 muitas vezes fina.<\/p>\n<p>Ambas as ferramentas se concentram no fluxo de trabalho e na efici\u00eancia, mas IDEA tamb\u00e9m permite que voc\u00ea importe as liga\u00e7\u00f5es do teclado do Vim se voc\u00ea estiver confort\u00e1vel com essa forma de trabalho.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/idea-vim.png\" alt=\"As extens\u00f5es IDEA permitem o uso de encaderna\u00e7\u00f5es de teclado Vim para que voc\u00ea se sinta como um Wizard.\" width=\"900\" height=\"730\"><figcaption class=\"wp-caption-text\">As extens\u00f5es IDEA permitem que voc\u00ea use a jun\u00e7\u00e3o do teclado do Vim para fazer voc\u00ea se sentir como um mago.<\/figcaption><\/figure>\n<p>Supomos que voc\u00ea provavelmente esteja usando IntelliJ IDEA se estiver trabalhando como parte de um <a href=\"https:\/\/kinqsta.com\/pt\/blog\/plugins-gerenciamento-projetos\/\">grande projeto<\/a> ou empresa com um neg\u00f3cio de software em andamento. Pode ser para compartilhar projetos ou para trabalhar em um ambiente consistente. Muitos desenvolvedores de WordPress est\u00e3o usando produtos JetBrains por causa de sua robustez no gerenciamento de projetos.<\/p>\n<p>O pre\u00e7o tamb\u00e9m \u00e9 um fator, e o IntelliJ \u00e9 constru\u00eddo sobre um <a href=\"https:\/\/www.jetbrains.com\/idea\/buy\/\">modelo de assinatura<\/a> que muitas vezes chega a tr\u00eas ou quatro n\u00fameros por ano.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/idea-pricing.png\" alt=\"Tela de pre\u00e7os do IntelliJ IDEAs.\" width=\"1500\" height=\"889\"><figcaption class=\"wp-caption-text\">Tela de pre\u00e7os do IntelliJ IDEAs.<\/figcaption><\/figure>\n<p>Apesar disso, existem edi\u00e7\u00f5es &#8220;comunit\u00e1rias&#8221; dos produtos JetBrains. Entretanto, estas s\u00e3o vers\u00f5es em escala reduzida do Software de origem; essencialmente, s\u00e3o solu\u00e7\u00f5es de c\u00f3digo aberto com elementos propriet\u00e1rios removidos.<\/p>\n<p>Al\u00e9m disso, a JetBrains oferece pre\u00e7os competitivos para projetos de c\u00f3digo aberto, startups, instala\u00e7\u00f5es educacionais, Docker Captains, e muito mais grupos de nicho.<\/p>\n<h3>Ferramentas de desenho e prototipagem web<\/h3>\n<p>\u00c9 claro, um aplicativo web n\u00e3o \u00e9 nada sem uma boa experi\u00eancia do usu\u00e1rio (UX). Como tal, a prototipagem de seus layouts e visuais muitas vezes precisa de uma ferramenta dedicada. <a href=\"https:\/\/kinqsta.com\/pt\/blog\/design-responsivo-web\/\">Ferramentas de projeto<\/a> ser\u00e3o vitais tanto no lado do servidor quanto no lado do cliente do desenvolvimento. Aqui est\u00e3o algumas escolhas populares.<\/p>\n<h4>9. Figma<\/h4>\n<p><a href=\"https:\/\/www.figma.com\/\">Figma<\/a> \u00e9 uma ferramenta de desenvolvimento da web frequentemente mencionada que lhe permite colaborar no projeto.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/figma.png\" alt=\"O editor Figma.\" width=\"1500\" height=\"875\"><figcaption class=\"wp-caption-text\">O editor Figma.<\/figcaption><\/figure>\n<p>Voc\u00ea pode usar o editor de arrastar e soltar para construir interfaces e outros elementos voltados para o usu\u00e1rio. Para os desenvolvedores, voc\u00ea tamb\u00e9m pode pegar trechos de c\u00f3digo para implantar em seus projetos. Figma torna o processo &#8211; da idea\u00e7\u00e3o \u00e0 implanta\u00e7\u00e3o &#8211; suave e mant\u00e9m as revis\u00f5es em baixa ao longo de toda a cadeia do projeto.<\/p>\n<p>Voc\u00ea tamb\u00e9m obt\u00e9m o benef\u00edcio de um conjunto homogeneizado de ferramentas para ajudar na escolha de fontes e cores. Este processo est\u00e1 em contraste com o uso de ferramentas separadas, como a <a href=\"https:\/\/type-scale.com\/\">Escala de Tipo<\/a>:<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/type-scale.png\" alt=\"O site da Balan\u00e7a de Tipo.\" width=\"1500\" height=\"801\"><figcaption class=\"wp-caption-text\">O site da Balan\u00e7a de Tipo.<\/figcaption><\/figure>\n<p>&#8230;e um subconjunto de ferramentas de desenvolvimento web como <a href=\"https:\/\/color.adobe.com\/create\/color-wheel\">Adobe Color<\/a>, <a href=\"https:\/\/coolors.co\">Coolors<\/a>, v\u00e1rios coletores de cores, e muito mais.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/coolors.png\" alt=\"O colhedor de cores Coolors.\" width=\"1500\" height=\"805\"><figcaption class=\"wp-caption-text\">O colhedor de cores Coolors.<\/figcaption><\/figure>\n<p>Embora a Figma tenha valor para projetos de um \u00fanico desenvolvedor, ela tem mais benef\u00edcios para uma equipe, uma vez que se dimensiona em tamanho. As equipes v\u00e3o gostar dos aspectos colaborativos do Figma, como o reposit\u00f3rio central de ativos e os componentes reutiliz\u00e1veis. Os l\u00edderes de equipe tamb\u00e9m apreciar\u00e3o as op\u00e7\u00f5es de relat\u00f3rios abrangentes para ver como os membros da equipe utilizam os v\u00e1rios sistemas de projeto.<\/p>\n<p>Quanto ao pre\u00e7o, a Figma custa US$ 12 por &#8220;editor&#8221; no <a href=\"https:\/\/www.figma.com\/pricing\/\">n\u00edvel padr\u00e3o<\/a>, que sobe para US$ 45 por &#8220;editor&#8221; para as equipes baseadas na empresa (para &#8220;editor&#8221;, leia-se &#8220;assento&#8221; &#8211; \u00e9 o mesmo conceito). Como tal, o pre\u00e7o poderia subir com base no n\u00famero de editores que voc\u00ea gostaria de ter a bordo.<\/p>\n<h4>10. Sketch<\/h4>\n<p><a href=\"https:\/\/www.sketch.com\/\">Sketch<\/a> \u00e9 um aplicativo somente para MacOS que tamb\u00e9m \u00e9 muito verificado entre os desenvolvedores:<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/sketch.png\" alt=\"O logotipo Sketch.\" width=\"1000\" height=\"828\"><figcaption class=\"wp-caption-text\">O logotipo Sketch.<\/figcaption><\/figure>\n<p>\u00c9 popular porque o Sketch inclui muitas funcionalidades sob o cap\u00f4, e \u00e9 tamb\u00e9m uma brisa para usar, o que faz sentido j\u00e1 que \u00e9 um aplicativo macOS nativo. Ele se parece um pouco com o <a href=\"https:\/\/developer.apple.com\/xcode\/ide\/\">Xcode IDE da Apple<\/a>, o que n\u00e3o \u00e9 uma coisa ruim, e se sente \u00f3timo para navegar.<\/p>\n<p>Naturalmente, voc\u00ea pode realizar fun\u00e7\u00f5es essenciais como edi\u00e7\u00e3o vetorial e redimensionamento de restri\u00e7\u00f5es. Entretanto, h\u00e1 muito mais no aplicativo que o ajudar\u00e1 a gerar projetos e export\u00e1-los para outros de forma r\u00e1pida.<\/p>\n<p>Por exemplo, veja a funcionalidade <a href=\"https:\/\/youtu.be\/qrgDwQ0Fy1k\">Smart Layout<\/a> do Sketch, que usa redimensionamento adapt\u00e1vel para combinar com suas dimens\u00f5es e layout atual. H\u00e1 tamb\u00e9m muitas <a href=\"https:\/\/www.sketch.com\/for-teams\/\">ferramentas de colabora\u00e7\u00e3o<\/a> para dar a todos uma forma de mergulhar em um design e ajudar a aperfei\u00e7o\u00e1-lo.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/sketch-teams.png\" alt=\"Uma vis\u00e3o geral do Sketch para Equipes.\" width=\"900\" height=\"696\"><figcaption class=\"wp-caption-text\">Uma vis\u00e3o geral do Sketch para Equipes.<\/figcaption><\/figure>\n<p>O Sketch difere de uma ferramenta como a Figma na medida em que um freelancer ou um desenvolvedor solit\u00e1rio pode pular a bordo gratuitamente e depois comprar uma assinatura quando houver necessidade. Neste sentido, o <a href=\"https:\/\/www.sketch.com\/pricing\/\">pre\u00e7o do Sketch<\/a> \u00e9 um pagamento \u00fanico de US$ 99 ou US$ 9 por m\u00eas por usu\u00e1rio.<\/p>\n<h4>11. InVision Studio<\/h4>\n<p>O <a href=\"https:\/\/www.invisionapp.com\/\">InVision Studio<\/a> vende-se exclusivamente como um aplicativo de &#8220;design de tela&#8221;. Faz sentido, e \u00e9 mais claro para entender tamb\u00e9m. O InVision Studio oferece todos os recursos e funcionalidades padr\u00e3o que voc\u00ea esperaria, como um editor intuitivo baseado em camadas e suporte vetorial.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/invision-studio.png\" alt=\"O aplicativo InVision Studio.\" width=\"900\" height=\"313\"><figcaption class=\"wp-caption-text\">O aplicativo InVision Studio.<\/figcaption><\/figure>\n<p>No entanto, h\u00e1 muito mais na caixa relacionado \u00e0 prototipagem e cria\u00e7\u00e3o de anima\u00e7\u00f5es. Por exemplo, voc\u00ea pode apontar, clicar e arrastar para unir quadros de arte e telas. Este recurso permite que voc\u00ea construa anima\u00e7\u00f5es como parte do processo de design e n\u00e3o como algo que voc\u00ea entrega mais tarde.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/invision-animation.png\" alt=\"Anima\u00e7\u00f5es dentro da aplica\u00e7\u00e3o InVision Studio.\" width=\"900\" height=\"626\"><figcaption class=\"wp-caption-text\">Anima\u00e7\u00f5es dentro do aplicativo InVision Studio.<\/figcaption><\/figure>\n<p>Falando em transfer\u00eancias, toda a equipe pode trabalhar dentro do InVision Studio por causa de bibliotecas de componentes compartilhados, op\u00e7\u00f5es de sincroniza\u00e7\u00e3o global, um modo de <strong>inspe\u00e7\u00e3o <\/strong>robusta, e muito mais.<\/p>\n<p>A <a href=\"https:\/\/www.invisionapp.com\/plans\">estrutura de pre\u00e7os<\/a> tamb\u00e9m \u00e9 competitiva. A vers\u00e3o gratuita do InVision Studio lhe d\u00e1 quase toda a funcionalidade da vers\u00e3o paga, com apenas uma restri\u00e7\u00e3o no n\u00famero de documentos que voc\u00ea pode salvar. O n\u00edvel Pro \u00e9 valioso para o poder do aplicativo (cerca de US$ 95\/usu\u00e1rio\/ano).<\/p>\n<h4>12. Affinity Designer<\/h4>\n<p>Se voc\u00ea \u00e9 um usu\u00e1rio do Adobe Illustrator, ter\u00e1 se deparado com o <a href=\"https:\/\/affinity.serif.com\/en-us\/\">Affinity Designer<\/a> no passado. A abordagem da Serif ao design gr\u00e1fico parece dar \u00e0 solu\u00e7\u00e3o da Adobe uma corrida por seu dinheiro:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/affinity-designer.png\" alt=\"O aplicativo Affinity Designer.\" width=\"900\" height=\"563\"><figcaption class=\"wp-caption-text\">O aplicativo Affinity Designer.<\/figcaption><\/figure>\n<p>Desde seu lan\u00e7amento, ganhou uma base de usu\u00e1rios crescente devido a seu bom relacionamento com a comunidade, princ\u00edpios de design estelar e modelo de pre\u00e7os atraente. Voc\u00ea encontrar\u00e1 vers\u00f5es para Mac, Windows e iPad, e cada vers\u00e3o pode trabalhar com vetores, rasters, ou ambos de uma s\u00f3 vez:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/affinity-editor.png\" alt=\"Editor do Affinity Designer.\" width=\"900\" height=\"694\"><figcaption class=\"wp-caption-text\">Editor do Affinity Designer.<\/figcaption><\/figure>\n<p>As ferramentas a que voc\u00ea est\u00e1 acostumado do Illustrator est\u00e3o todas presentes, juntamente com um conjunto completo de perfis de cores e op\u00e7\u00f5es de exporta\u00e7\u00e3o:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/affinity-export.png\" alt=\"As op\u00e7\u00f5es de exporta\u00e7\u00e3o em Affinity Designer.\" width=\"900\" height=\"93\"><figcaption class=\"wp-caption-text\">As op\u00e7\u00f5es de exporta\u00e7\u00e3o em Affinity Designer.<\/figcaption><\/figure>\n<p>Em resumo, os recursos e funcionalidades est\u00e3o no lugar para criar gr\u00e1ficos profissionais para seus projetos. Al\u00e9m disso, o pre\u00e7o \u00e9 extremamente competitivo. Custa cerca de 50 d\u00f3lares pelo pre\u00e7o total, o que \u00e9 um pagamento \u00fanico. N\u00e3o tem uma op\u00e7\u00e3o adequada baseada em nuvens como o Illustrator. Mesmo assim, por um pagamento \u00fanico, voc\u00ea recebe a amplitude do Adobe, apresentado de uma forma subjetivamente melhor.<\/p>\n<h4>13. CodePen ou JSFiddle<\/h4>\n<p>Quando discutimos o IntelliJ IDEA anteriormente, n\u00e3o mencionamos seus recursos menores, por\u00e9m \u00fateis &#8211; <a href=\"https:\/\/www.jetbrains.com\/help\/idea\/scratches.html\">arquivos Scratch<\/a>. Ele permite que voc\u00ea escreva e teste rapidamente um trecho de c\u00f3digo sem ter que impactar seu projeto de trabalho atual.<\/p>\n<p>Para usu\u00e1rios de outros editores de c\u00f3digo, uma solu\u00e7\u00e3o como <a href=\"https:\/\/codepen.io\/\">CodePen<\/a> ou <a href=\"https:\/\/jsfiddle.net\/\">JSFiddle<\/a> \u00e9 um excelente substituto. Ambos funcionam de forma semelhante: h\u00e1 tr\u00eas editores de texto para HTML, CSS e JavaScript, e uma tela de sa\u00edda para ver o resultado:<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/codepen-example.png\" alt=\"O console CodePen.\" width=\"1500\" height=\"591\"><figcaption class=\"wp-caption-text\">O console CodePen.<\/figcaption><\/figure>\n<p>Voc\u00ea pode nomear sua &#8220;Pen&#8221; ou &#8220;Fiddle&#8221; dependendo de sua plataforma, salv\u00e1-la e compartilh\u00e1-la com outros. \u00c9 uma id\u00e9ia t\u00e3o simples &#8211; uma id\u00e9ia que pode ajudar voc\u00ea a pegar seus pensamentos mal cozidos sobre um aspecto de um projeto e realiz\u00e1-los em segundos.<\/p>\n<p>Para os desenvolvedores que querem iluminar um determinado elemento dentro de um arquivo e mostrar onde as mudan\u00e7as s\u00e3o poss\u00edveis, uma &#8220;IDE online&#8221; \u00e9 inestim\u00e1vel. Al\u00e9m disso, a colabora\u00e7\u00e3o tamb\u00e9m \u00e9 poss\u00edvel atrav\u00e9s de chat ou de um &#8220;microfone ao vivo&#8221;:<\/p>\n<figure style=\"width: 1098px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/jsfiddle-chat.png\" alt=\"A tela JSFiddle Collaboration (Colabora\u00e7\u00e3o JSFiddle).\" width=\"1098\" height=\"704\"><figcaption class=\"wp-caption-text\">A tela JSFiddle Collaboration (Colabora\u00e7\u00e3o JSFiddle).<\/figcaption><\/figure>\n<p>Em geral, uma IDE online poderia ser considerada uma ferramenta de desenvolvimento web &#8220;adormecida&#8221;, pois n\u00e3o \u00e9 mencionada com muita freq\u00fc\u00eancia, mas \u00e9 utilizada por muitos desenvolvedores para criar um c\u00f3digo melhor.<\/p>\n<h4>14. Buttons Generator<\/h4>\n<p>O <a href=\"https:\/\/markodenic.com\/tools\/buttons-generator\/\">Buttons Generator<\/a> \u00e9 uma ferramenta geradora de bot\u00f5es CSS on-line e gratuita que pode ser usada para criar v\u00e1rios estilos diferentes de bot\u00f5es CSS com apenas um clique. Basta rolar pela lista de estilos de bot\u00e3o e escolher o que voc\u00ea gosta. Clique no estilo desejado e o CSS ser\u00e1 adicionado automaticamente \u00e0 sua \u00e1rea de transfer\u00eancia.<\/p>\n<figure id=\"attachment_149037\" aria-describedby=\"caption-attachment-149037\" style=\"width: 1200px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-149037 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/buttons-generator.png\" alt=\"Buttons Generator\" width=\"1200\" height=\"604\"><figcaption id=\"caption-attachment-149037\" class=\"wp-caption-text\">Buttons Generator<\/figcaption><\/figure>\n<p>Voc\u00ea pode usar as cores e os estilos dos bot\u00f5es como est\u00e3o ou editar o CSS para dar ao bot\u00e3o a cor e os estilos que desejar. Existem v\u00e1rios estilos diferentes para escolher, incluindo 3D, Gradiente, com Borda Sombreada, Neom\u00f3rfico, Retr\u00f4, Efeito de Deslizamento e muitos mais.<\/p>\n<p>Experimente, \u00e9 uma maneira divertida, \u00fanica e f\u00e1cil de gerar bot\u00f5es CSS.<\/p>\n<h3>Clientes Git<\/h3>\n<p>Ter uma forma centralizada de armazenar o c\u00f3digo, documentar as mudan\u00e7as e trabalhar com uma equipe sem duplica\u00e7\u00e3o \u00e9 uma tarefa para um <a href=\"https:\/\/kinqsta.com\/pt\/blog\/git-vs-github\/\">Sistema de Controle de Vers\u00e3o (VCS)<\/a>. Aqui est\u00e3o alguns clientes que lidam com um VCS: git.<\/p>\n<p>Vamos discutir primeiro o pr\u00f3prio VCS.<\/p>\n<h4>15. Git<\/h4>\n<p><a href=\"https:\/\/git-scm.com\/\">Git<\/a> \u00e9 essencial para um desenvolvedor moderno, e como tal, \u00e9 uma das ferramentas de desenvolvimento web mais cruciais dispon\u00edveis. Em resumo, \u00e9 uma forma de documentar as mudan\u00e7as que voc\u00ea faz no c\u00f3digo do seu projeto e armazen\u00e1-las em &#8220;reposit\u00f3rios&#8221;:<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/wordpress-commits.png\" alt=\"Uma lista de WordPress que o GitHub se compromete.\" width=\"1500\" height=\"795\"><figcaption class=\"wp-caption-text\">Uma lista de WordPress que o GitHub se compromete.<\/figcaption><\/figure>\n<p>Git foi inventado pelo criador do <a href=\"https:\/\/www.linux.org\/\">Linux<\/a> Linus Torvalds. e usa uma s\u00e9rie de comandos para adicionar altera\u00e7\u00f5es em arquivos em uma &#8220;\u00e1rea de teste&#8221;, onde voc\u00ea os &#8220;comprometer\u00e1&#8221; a um reposit\u00f3rio. De l\u00e1, voc\u00ea os &#8220;empurrar\u00e1&#8221; para um reposit\u00f3rio remoto hospedado on-line.<\/p>\n<p>Embora n\u00e3o seja o \u00fanico VCS dispon\u00edvel &#8211; a equipe de desenvolvimento do WordPress <a href=\"https:\/\/trac.edgewall.org\/\">aind<\/a><a href=\"https:\/\/trac.edgewall.org\/\">a usa o Trac<\/a> para muitos projetos &#8211; ele \u00e9 o mais proeminente. Um VCS como o Git ou Trac ajuda as equipes a trabalhar em conjunto, hospedando o c\u00f3digo em um local central.<\/p>\n<p>Os comandos b\u00e1sicos s\u00e3o fun\u00e7\u00f5es de uma s\u00f3 palavra prefaciadas com git, muitas vezes utilizadas a partir da linha de comando. Por exemplo, os comandos b\u00e1sicos s\u00e3o de uma s\u00f3 palavra:<\/p>\n<pre><code>git add file.php<\/code><\/pre>\n<p>Esta express\u00e3o adiciona <strong>file.php <\/strong>\u00e0 sua \u00e1rea de teste. Em outras palavras, ele registra as mudan\u00e7as como algo que voc\u00ea gostaria de armazenar sem dar os retoques finais. Voc\u00ea pode fazer isto com um arquivo ou um projeto inteiro, se desejar.<\/p>\n<p>Para comprometer o arquivo, voc\u00ea executa o <code>git commit<\/code>. Daqui, voc\u00ea pode adicionar um coment\u00e1rio para contar aos outros sobre seus commits. Depois disso, suas mudan\u00e7as s\u00e3o armazenadas e empurradas para o &#8220;ramo&#8221; prim\u00e1rio. \u00c9 claro, isso depende se voc\u00ea est\u00e1 trabalhando em um &#8220;reporte&#8221; remoto.<\/p>\n<p>Se voc\u00ea \u00e9 novo em Git e VCSs em geral, GitLab tem um <a href=\"https:\/\/docs.gitlab.com\/ee\/gitlab-basics\/start-using-git.html\">\u00f3timo guia<\/a> para <a href=\"https:\/\/docs.gitlab.com\/ee\/gitlab-basics\/start-using-git.html\">iniciantes<\/a> no uso de Git na linha de comando. Tamb\u00e9m falaremos um pouco sobre o pr\u00f3prio GitLab mais tarde.<\/p>\n<h4>16. GitHub<\/h4>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/kinsta-github.png\" alt=\"P\u00e1gina do GitHub da Kinsta.\" width=\"1500\" height=\"737\"><figcaption class=\"wp-caption-text\">P\u00e1gina do GitHub da Kinsta.<\/figcaption><\/figure>\n<p>Para a <a href=\"https:\/\/insights.stackoverflow.com\/survey\/2020#technology-collaboration-tools-professional-developers2\">grande maioria dos desenvolvedores<\/a>, <a href=\"https:\/\/github.com\/\">GitHub<\/a> \u00e9 <em>o <\/em>local onde os reposit\u00f3rios de Git do projeto s\u00e3o armazenados:<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/wordpress-repos.png\" alt=\"Reposit\u00f3rios WordPress GitHub.\" width=\"1500\" height=\"459\"><figcaption class=\"wp-caption-text\">Reposit\u00f3rios WordPress GitHub.<\/figcaption><\/figure>\n<p>\u00c9 uma solu\u00e7\u00e3o de propriedade da Microsoft que cobre muito mais do que a hospedagem Git. H\u00e1 um monte de ferramentas de <a href=\"https:\/\/github.com\/features#features-automation\">teste automatizadas<\/a> tamb\u00e9m, e uma tentativa de oferecer <a href=\"https:\/\/github.com\/features#features-team-administration\">recursos de colabora\u00e7\u00e3o extra<\/a>.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/github-collaboration.png\" alt=\"As caracter\u00edsticas de colabora\u00e7\u00e3o da GitHub.\" width=\"900\" height=\"464\"><figcaption class=\"wp-caption-text\">As caracter\u00edsticas de colabora\u00e7\u00e3o da GitHub.<\/figcaption><\/figure>\n<p>Para projetos de c\u00f3digo aberto, plataformas <a href=\"https:\/\/kinqsta.com\/pt\/blog\/que-github\/\">como o GitHub<\/a> s\u00e3o quase a op\u00e7\u00e3o de fato. Dado isto, GitHub como uma ferramenta de desenvolvimento web n\u00e3o tem pre\u00e7o para muitos usu\u00e1rios de c\u00f3digo aberto, aprendizes e desenvolvedores em geral. \u00c9 especialmente verdadeiro quando se investiga o rastreador de problemas do GitHub para resolver um problema com pacotes instalados.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/github-issue-tracker.png\" alt=\"GitHub\u2019s Issue Tracker.\" width=\"900\" height=\"522\"><figcaption class=\"wp-caption-text\">GitHub\u2019s Issue Tracker.<\/figcaption><\/figure>\n<p>GitHub n\u00e3o \u00e9 apenas para armazenar reposit\u00f3rios de programas. \u00c9 tamb\u00e9m para outros projetos de codifica\u00e7\u00e3o, tais como desenvolvimento web, e at\u00e9 mesmo livros.<\/p>\n<p>Em geral, GitHub \u00e9 uma ferramenta fant\u00e1stica que ajuda a construir uma comunidade saud\u00e1vel a partir de muitos ramos d\u00edspares. Entretanto, n\u00e3o \u00e9 a \u00fanica plataforma ao redor.<\/p>\n<h4>17. GitLab<\/h4>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/gitlab.png\" alt=\"O logotipo do GitLab.\" width=\"900\" height=\"591\"><figcaption class=\"wp-caption-text\">O logotipo do GitLab.<\/figcaption><\/figure>\n<p>Mencionamos isso antes, mas o <a href=\"http:\/\/gitlab.com\">GitLab<\/a> \u00e9 um concorrente do GitHub, com um objetivo semelhante. \u00c9 essencialmente um host para Git repos, mas tamb\u00e9m oferece alguns outros extras tamb\u00e9m.<\/p>\n<p>Enquanto GitHub se autodenomina uma &#8220;plataforma de desenvolvimento&#8221;, GitLab se concentra em &#8220;DevOps&#8221;. Em sua camada gratuita, GitLab oferece cada etapa do ciclo de vida DevOps, testes est\u00e1ticos de seguran\u00e7a do aplicativo, e cerca de 400 minutos por m\u00eas para Desenvolvimento Cont\u00ednuo (CD) e Integra\u00e7\u00e3o Cont\u00ednua (CI).<\/p>\n<p>GitLab cai em seu senso de comunidade, que \u00e9 a grande diferen\u00e7a quando se trata de GitHub. Trata-se mais da implanta\u00e7\u00e3o e de todo o ciclo de um projeto. N\u00e3o \u00e9 negativo, mas significa que GitLab \u00e9 mais uma plataforma &#8220;insular&#8221;, indiscutivelmente n\u00e3o t\u00e3o adequada para projetos de c\u00f3digo aberto quanto GitHub.<\/p>\n<p>Para a maioria das equipes, o n\u00edvel gratuito do GitLab ser\u00e1 suficiente. Por <a href=\"https:\/\/about.gitlab.com\/pricing\/\">cerca de US$ 230<\/a> por ano, por usu\u00e1rio, voc\u00ea ter\u00e1 acesso a an\u00e1lises para seu c\u00f3digo e produtividade, cerca de 10.000 CD\/CI minutos, e mais.<\/p>\n<h4>18. Sourcetree<\/h4>\n<p><a href=\"https:\/\/www.sourcetreeapp.com\/\">Sourcetree<\/a> n\u00e3o \u00e9 um host de reposit\u00f3rio Git, mas uma Interface Gr\u00e1fica do Usu\u00e1rio (GUI) para gerenci\u00e1-los. \u00c9 uma das muitas solu\u00e7\u00f5es, tais como <a href=\"https:\/\/www.gitkraken.com\/\">GitKraken<\/a>, <a href=\"https:\/\/www.sublimemerge.com\/\">Sublime Merge<\/a>, <a href=\"https:\/\/desktop.github.com\/\">GitHub Desktop<\/a>, e <a href=\"https:\/\/git-scm.com\/downloads\/guis\">muitas outras<\/a>.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/sourcetree.png\" alt=\"A p\u00e1gina inicial do Sourcetree.\" width=\"900\" height=\"570\"><figcaption class=\"wp-caption-text\">A p\u00e1gina inicial do Sourcetree.<\/figcaption><\/figure>\n<p>\u00c9 um produto Atlassian (e n\u00f3s adoramos Atlassian!) que se conecta com outros produtos <a href=\"https:\/\/bitbucket.org\/\">como Bitbucket<\/a> para oferecer uma representa\u00e7\u00e3o visual do seu reposit\u00f3rio Git.<\/p>\n<p>O Sourcetree \u00e9 comercializado como um cliente Git f\u00e1cil &#8211; e \u00e9 &#8211; mas tamb\u00e9m \u00e9 adequado para usu\u00e1rios experientes. Ele tem muito sob o cap\u00f4 para apoiar uma equipe que trabalha com Git (e <a href=\"https:\/\/www.mercurial-scm.org\/\">Mercurial<\/a> tamb\u00e9m).<\/p>\n<p>Por exemplo, a Sourcetree faz coisas simples, tais como destacar as mudan\u00e7as em rela\u00e7\u00e3o ao \u00faltimo compromisso, mas tamb\u00e9m aborda mais se voc\u00ea precisar. Os l\u00edderes de equipe podem rever os conjuntos de mudan\u00e7as, trabalhar entre as filiais conforme necess\u00e1rio e visualizar o c\u00f3digo usando gr\u00e1ficos e guias de informa\u00e7\u00e3o:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/sourcetree-graphs.png\" alt=\"Vista gr\u00e1fica da \u00e1rvore de fonte.\" width=\"900\" height=\"563\"><figcaption class=\"wp-caption-text\">Vista gr\u00e1fica da \u00e1rvore de fonte.<\/figcaption><\/figure>\n<p>Se um cliente Git \u00e9 adequado para voc\u00ea depende de suas circunst\u00e2ncias. Se voc\u00ea ainda estiver aprendendo, recomendamos manter um Terminal enquanto voc\u00ea compreende o fluxo e o processo. Para profissionais ou equipes com amplo uso de Git, um cliente como a Sourcetree vai raspar minutos do trabalho que voc\u00ea faz todos os dias.<\/p>\n<h3>Ferramentas para desenvolvedores de navegadores<\/h3>\n<p>Sem um navegador web, n\u00e3o h\u00e1 desenvolvimento web. Entretanto, embora seu navegador escolhido seja fundamental para <a href=\"https:\/\/kinqsta.com\/pt\/blog\/como-limpar-o-cache\/\">navegar na web<\/a>, voc\u00ea tamb\u00e9m pode us\u00e1-lo para descobrir como ele funciona.<\/p>\n<p>A maioria dos navegadores modernos inclui ferramentas de desenvolvimento espec\u00edficas para ajud\u00e1-lo a analisar o c\u00f3digo back-end, que voc\u00ea pode ent\u00e3o levar de volta ao seu projeto. Aqui est\u00e3o alguns dos mais populares.<\/p>\n<h4>19. Ferramentas para desenvolvedores Chrome<\/h4>\n<p>O <a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/\">&#8220;DevTools&#8221; do chrome<\/a> s\u00e3o reverenciadas em todas as comunidades por seu conjunto de caracter\u00edsticas e diagn\u00f3sticos estelares.<\/p>\n<p>Dado o <a href=\"https:\/\/kinqsta.com\/pt\/participacao-mercado-navegadores-desktop\/\">aumento dos navegadores baseados no chrome<\/a>, muitos t\u00eam o mesmo conjunto de DevTools com atalhos similares. Voc\u00ea pode verificar <a href=\"https:\/\/microsoftedgewelcome.microsoft.com\/en-us\/\">Microsoft Edge<\/a>, <a href=\"https:\/\/kinqsta.com\/pt\/blog\/revisao-brave-browser\/\">Brave<\/a>, o pr\u00f3prio <a href=\"https:\/\/www.chromium.org\/\">Chromium<\/a> e muitos outros clones e trabalhar com seus projetos dentro do navegador.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/brave-devtools.png\" alt=\"DevTools do corajoso navegador.\" width=\"900\" height=\"546\"><figcaption class=\"wp-caption-text\">DevTools do corajoso navegador.<\/figcaption><\/figure>\n<p>A aba <strong>Elements <\/strong>ser\u00e1 um assombro regular, pois \u00e9 aqui que voc\u00ea ver\u00e1 o c\u00f3digo fonte da p\u00e1gina. E, em nossa opini\u00e3o, a aba <strong>Performance <\/strong>d\u00e1 insights sobre o carregamento da p\u00e1gina que outros navegadores DevTools n\u00e3o conseguem igualar:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/brave-performance.png\" alt=\"Aba de desempenho do Brave.\" width=\"900\" height=\"578\"><figcaption class=\"wp-caption-text\">Aba de desempenho do Brave.<\/figcaption><\/figure>\n<p>A aba <strong>Seguran\u00e7a <\/strong>tamb\u00e9m fornece algumas boas informa\u00e7\u00f5es, que ser\u00e3o necess\u00e1rias para monitorar (ou pesquisar) o site do cliente:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/brave-security.png\" alt=\"A aba Seguran\u00e7a da Brave.\" width=\"900\" height=\"578\"><figcaption class=\"wp-caption-text\">A aba Seguran\u00e7a da Brave.<\/figcaption><\/figure>\n<p>Melhor ainda, voc\u00ea ser\u00e1 capaz de gerar relat\u00f3rios do <a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\/\">Google Lighthouse<\/a> diretamente do seu navegador baseado no Chromium:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/brave-lighthouse.png\" alt=\"Um relat\u00f3rio do Google Lighthouse da Brave's DevTools.\" width=\"900\" height=\"578\"><figcaption class=\"wp-caption-text\">Um relat\u00f3rio do Google Lighthouse da Brave&#8217;s DevTools.<\/figcaption><\/figure>\n<p>As ferramentas DevTools aqui s\u00e3o subjetivamente as melhores, ent\u00e3o voc\u00ea encontrar\u00e1 usu\u00e1rios baseados no chrome e no chromium que se apoiar\u00e3o nelas. Embora outros navegadores tamb\u00e9m tenham DevTools, e eles tamb\u00e9m s\u00e3o dignos de considera\u00e7\u00e3o.<\/p>\n<h4>20. Ferramentas do desenvolvedor Firefox<\/h4>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/firefox.png\" alt=\"A p\u00e1gina inicial do Firefox.\" width=\"900\" height=\"343\"><figcaption class=\"wp-caption-text\">A p\u00e1gina inicial do Firefox.<\/figcaption><\/figure>\n<p>Com uma base de usu\u00e1rios ativos mensal de <a href=\"https:\/\/data.firefox.com\/dashboard\/user-activity\">cerca de 220 milh\u00f5es<\/a>, o Firefox ainda \u00e9 um navegador popular, apesar do dom\u00ednio do Google. No passado, os desenvolvedores <a href=\"https:\/\/getfirebug.com\/\">elogiaram o Firebug<\/a>, e ele era freq\u00fcentemente um l\u00edder em depura\u00e7\u00e3o dentro do navegador.<\/p>\n<p>Hoje, temos as ferramentas de desenvolvimento do Firefox:<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/firefox-dev-tools.png\" alt=\"Ferramentas de desenvolvimento do Firefox.\" width=\"1500\" height=\"833\"><figcaption class=\"wp-caption-text\">Ferramentas de desenvolvimento do Firefox.<\/figcaption><\/figure>\n<p>H\u00e1 um conjunto central de recursos para visualiza\u00e7\u00e3o do c\u00f3digo fonte do site (<strong>Inspetor<\/strong>), um <strong>Depurador<\/strong>, <strong>Mem\u00f3ria<\/strong>, <strong>Armazenamento <\/strong>e muito mais.<\/p>\n<p>Para iniciantes, o <strong>Console <\/strong>\u00e9 uma porta de entrada para a codifica\u00e7\u00e3o em geral porque voc\u00ea \u00e9 capaz de executar JavaScript diretamente no navegador, e \u00e9 uma maneira f\u00e1cil de testar trechos e encontrar seus p\u00e9s ao iniciar:<\/p>\n<figure style=\"width: 988px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/web-console.png\" alt=\"Um exemplo de um console de navegador.\" width=\"988\" height=\"315\"><figcaption class=\"wp-caption-text\">Um exemplo de um console de navegador.<\/figcaption><\/figure>\n<p>Apesar disso, pensamos que o Firefox (e outros navegadores) tem menos pacotes em suas ferramentas de desenvolvimento do que os navegadores baseados no cro[mo. Ainda assim, para a depura\u00e7\u00e3o e solu\u00e7\u00e3o de problemas entre navegadores, muitas vezes voc\u00ea pressionar\u00e1 o Firefox para entrar em servi\u00e7o. Como tal, \u00e9 uma coisa boa que eles sejam ideais para quase todas as tarefas.<\/p>\n<h3>Estruturas front-end<\/h3>\n<p>Por falar em front-end, voc\u00ea precisar\u00e1 de algo adequado para criar sites incr\u00edveis. Sua escolha da estrutura aqui \u00e9 crucial. Voc\u00ea deve sempre selecionar a melhor ferramenta para o trabalho.<\/p>\n<p>Com isso em mente, vamos olhar para algumas escolhas populares.<\/p>\n<h4>21. Bootstrap<\/h4>\n<p>A reatividade m\u00f3vel \u00e9 uma caracter\u00edstica padr\u00e3o no design moderno da web. \u00c9 um passo bem-vindo, dado como a <a href=\"https:\/\/www.smartinsights.com\/mobile-marketing\/mobile-marketing-analytics\/mobile-marketing-statistics\/\">navega\u00e7\u00e3o m\u00f3vel<\/a> j\u00e1 ultrapassou os desktops. Dado isto, voc\u00ea vai querer uma forma de girar os primeiros sites m\u00f3veis rapidamente.<\/p>\n<p><a href=\"https:\/\/getbootstrap.com\/\">Bootstrap<\/a> \u00e9 uma \u00f3tima ferramenta de desenvolvimento web que est\u00e1 vendo muito uso:<\/p>\n<figure style=\"width: 1160px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/bootstrap.png\" alt=\"O logotipo da Bootstrap.\" width=\"1160\" height=\"780\"><figcaption class=\"wp-caption-text\">O logotipo da Bootstrap.<\/figcaption><\/figure>\n<p>\u00c9 um conjunto de ferramentas que combina plugins JavaScript, <a href=\"https:\/\/sass-lang.com\/\">vari\u00e1veis Sass<\/a>, alguns componentes pr\u00e9-constru\u00eddos, um <a href=\"https:\/\/kinqsta.com\/pt\/socios\/wpgridbuilder-pt\/\">sistema de grade responsiva<\/a> \u00e0 qualidade, e muito mais. H\u00e1 at\u00e9 mesmo um <a href=\"https:\/\/themes.getbootstrap.com\/\">mercado de temas oficiais<\/a> que funcionam com Bootstrap, e muitos sites WordPress tamb\u00e9m usam temas constru\u00eddos em cima da estrutura de design.<\/p>\n<p>Naturalmente, o uso ou n\u00e3o do Bootstrap depender\u00e1 das necessidades do seu projeto. Entretanto, \u00e9 l\u00f3gico supor que os projetos de desenvolvimento web com or\u00e7amentos apertados e reviravoltas r\u00e1pidas se transformar\u00e3o em uma solu\u00e7\u00e3o &#8220;Bootstrapped&#8221; e a adaptar\u00e3o ao WordPress. Dado que a estrutura e o WordPress s\u00e3o gratuitos, seu tempo se torna o \u00fanico fator de custo.<\/p>\n<h4>22. Tailwind CSS<\/h4>\n<p>No papel, <a href=\"https:\/\/tailwindcss.com\/\">CSS Tailwind CSS<\/a> n\u00e3o faz sentido. \u00c9 uma estrutura de front-end para uma linguagem que faz parte da trindade central do desenvolvimento da web. Como tal, \u00e9 l\u00f3gico pensar que o usu\u00e1rio alvo j\u00e1 teria o conhecimento adequado sem a necessidade de uma estrutura.<\/p>\n<p>Na realidade, o CSS Tailwind CSS faz <em>todo o <\/em>sentido. \u00c9 uma maneira de projetar o front-end do seu site sem deixar HTML.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/tailwind-css.png\" alt=\"Um exemplo de CSS de vento de cauda.\" width=\"900\" height=\"392\"><figcaption class=\"wp-caption-text\">Um exemplo de CSS de vento de cauda.<\/figcaption><\/figure>\n<p>Voc\u00ea usa classes de utilidade dentro de v\u00e1rias tags para adicionar em CSS a partir de um StyleSheet central. \u00c9 claro que o CSS ainda \u00e9 a principal fonte de estilo. Est\u00e1 fora do seu alcance enquanto voc\u00ea constr\u00f3i um layout usando HTML. Assim, ele permite que voc\u00ea desenvolva estrutura e estilo ao mesmo tempo.<\/p>\n<p>A abordagem nos faz lembrar do <a href=\"https:\/\/960.gs\/\">Sistema de Grade 960<\/a> e funcionaria bem em conjunto com essa estrutura. Dito isto, h\u00e1 o perigo de empacotar elementos com tantas classes que voc\u00ea poderia acabar com uma confus\u00e3o de c\u00f3digo de esparguete. Voc\u00ea vai precisar de paci\u00eancia e disciplina para trabalhar com o CSS Tailwind, mas se ele se encaixa em seu projeto, \u00e9 uma estrutura r\u00e1pida e robusta.<\/p>\n<h4>23. Bulma<\/h4>\n<p>Fizemos todo o progresso que fizemos no projeto de estruturas e layouts do site, criando colunas flex\u00edveis, responsivas e din\u00e2micas um bloqueio de estrada para muitos. Embora o manuseio n\u00e3o seja a \u00fanica coisa que <a href=\"https:\/\/bulma.io\/\">Bulma<\/a> pode fazer, este tipo de aplicativo \u00e9 carne e batatas para a estrutura:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/bulma.png\" alt=\"O site da Bulma.\" width=\"900\" height=\"268\"><figcaption class=\"wp-caption-text\">O site da Bulma.<\/figcaption><\/figure>\n<p>Assim como o Tailwind CSS, a Bulma esconde o CSS e lhe d\u00e1 classes utilit\u00e1rias para seu HTML. \u00c9 constru\u00eddo com Flexbox, mobile-first, e modular. \u00c9 \u00f3timo se voc\u00ea precisar apenas de alguns componentes. Voc\u00ea tamb\u00e9m pode misturar e combinar frameworks, se desejar.<\/p>\n<p>Al\u00e9m disso, voc\u00ea n\u00e3o precisa de nenhum JavaScript para colocar a Bulma em funcionamento, pois \u00e9 apenas CSS. Voc\u00ea \u00e9 capaz de adicionar elementos de interface, tais como bot\u00f5es com o m\u00ednimo de c\u00f3digo. \u00c9 uma estrutura simples e de c\u00f3digo aberto que pode se adaptar \u00e0s necessidades do seu pr\u00f3prio projeto. Em nosso livro, essa \u00e9 uma caracter\u00edstica valiosa que voc\u00ea faria bem em aproveitar.<\/p>\n<h4>24. Foundation<\/h4>\n<p>A equipe da ZURB tem sua \u00fanica atua\u00e7\u00e3o em uma estrutura de CSS na <a href=\"https:\/\/get.foundation\/\">Foundation<\/a>. \u00c9 uma ferramenta m\u00f3vel, sem\u00e2ntica, que tem dois sabores para sites e e-mail:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/foundation.png\" alt=\"A p\u00e1gina inicial da Foundation.\" width=\"900\" height=\"246\"><figcaption class=\"wp-caption-text\">A p\u00e1gina inicial da Foundation.<\/figcaption><\/figure>\n<p>A funda\u00e7\u00e3o \u00e9 constru\u00edda tendo a acessibilidade como prioridade. Cada trecho da Funda\u00e7\u00e3o vem com atributos ARIA dedicados. Entretanto, antes de chegar a esta etapa, Foundation \u00e9 impressionante para prototipagem r\u00e1pida por causa de como voc\u00ea adiciona isso ao seu HTML. Voc\u00ea \u00e9 capaz de criar quase qualquer elemento estrutural em sua p\u00e1gina &#8211; mesmo v\u00e1rios tipos de menus e navega\u00e7\u00e3o:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/foundation-menu.png\" alt=\"Cria\u00e7\u00e3o de um menu de navega\u00e7\u00e3o na Foundation.\" width=\"900\" height=\"429\"><figcaption class=\"wp-caption-text\">Cria\u00e7\u00e3o de um menu de navega\u00e7\u00e3o na Foundation.<\/figcaption><\/figure>\n<p>A ZURB tamb\u00e9m fornece uma riqueza de excelente <a href=\"https:\/\/get.foundation\/learn\/tutorials.html\">documenta\u00e7\u00e3o e tutoriais<\/a> para que voc\u00ea aprenda os aspectos internos e externos da estrutura. A funda\u00e7\u00e3o \u00e9 simples de usar, mas suspeitamos que voc\u00ea pode ir a fundo nos locais de constru\u00e7\u00e3o e sair com layouts e funcionalidades complexas.<\/p>\n<p>Voc\u00ea tamb\u00e9m encontrar\u00e1 um <a href=\"https:\/\/get.foundation\/templates.html\">monte de modelos<\/a> no site da Funda\u00e7\u00e3o. Eles s\u00e3o arma\u00e7\u00f5es de arame sem ossos para ajudar voc\u00ea a sair do ch\u00e3o &#8211; uma inclus\u00e3o bem-vinda:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/foundation-templates.png\" alt=\"Biblioteca de modelos da Foundation.\" width=\"900\" height=\"181\"><figcaption class=\"wp-caption-text\">Biblioteca de modelos da Foundation.<\/figcaption><\/figure>\n<p>De modo geral, a estrutura da Foundation faz o que diz na lata. Ela ser\u00e1 central para o desenvolvimento do seu site, em vez de deix\u00e1-lo aparafusar mais funcionalidades. Como tal, voc\u00ea pode n\u00e3o estar utilizando-o para cada projeto. Embora, onde for empregado, ele far\u00e1 o neg\u00f3cio em todos os tipos de sites.<\/p>\n<h4>25. Material-UI<\/h4>\n<p>Discutiremos Reagir com mais detalhes mais tarde, mas por enquanto, saiba que o <a href=\"https:\/\/material-ui.com\/\">Material-UI<\/a> \u00e9 baseado na biblioteca de componentes desta estrutura JavaScript. Para os desconhecidos, o Material Design \u00e9 a &#8220;filosofia&#8221; do Google sobre como projetar a interface de um site. Isso significa muitas fontes Roboto e blocos de cores:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/material-ui.png\" alt=\"Material-UI procura atender aos padr\u00f5es de design do Google.\" width=\"900\" height=\"404\"><figcaption class=\"wp-caption-text\">Material-UI procura atender aos padr\u00f5es de design do Google.<\/figcaption><\/figure>\n<p>Voc\u00ea vai importar a biblioteca para o React e depois usar tags HTML dedicadas para construir seu site:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/material-ui-button.png\" alt=\"Criando um bot\u00e3o em Material-UI.\" width=\"900\" height=\"346\"><figcaption class=\"wp-caption-text\">Criando um bot\u00e3o em Material-UI.<\/figcaption><\/figure>\n<p>Para personalizar ainda mais o elemento, voc\u00ea adiciona classes a suas tags HTML. Todo o bloco de c\u00f3digo \u00e9 envolvido em uma fun\u00e7\u00e3o, e voc\u00ea renderizar\u00e1 os detalhes (e a p\u00e1gina por extens\u00e3o) em Reagir.<\/p>\n<p>H\u00e1 muitos <a href=\"https:\/\/material-ui.com\/store\/\">temas gratuitos e premium<\/a> dispon\u00edveis, cobrindo tamb\u00e9m muitos casos de uso e pre\u00e7os:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/material-ui-themes.png\" alt=\"A biblioteca tem\u00e1tica Material-UI.\" width=\"900\" height=\"472\"><figcaption class=\"wp-caption-text\">A biblioteca de temas Material-UI.<\/figcaption><\/figure>\n<p>Como o Material-UI tem um caso de uso espec\u00edfico &#8211; a cria\u00e7\u00e3o de sites em torno do Material Design &#8211; ser\u00e1 uma estrutura de ponta a ponta se este for seu objetivo. Em particular, a biblioteca de temas ser\u00e1 um recurso valioso para come\u00e7ar, independentemente do seu or\u00e7amento.<\/p>\n<h4>26. HTML5 Boilerplate<\/h4>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/html5-boilerplate.png\" alt=\"A p\u00e1gina inicial do HTML5 Boilerplate.\" width=\"900\" height=\"406\"><figcaption class=\"wp-caption-text\">A p\u00e1gina inicial do HTML5 Boilerplate.<\/figcaption><\/figure>\n<p>Se voc\u00ea \u00e9 um desenvolvedor WordPress, pode ter se deparado com <a href=\"https:\/\/underscores.me\/\">Underscores<\/a>. \u00c9 um tema b\u00e1sico do WordPress que economiza in\u00fameras horas reunindo os elementos funcionais e essenciais de seu site. <a href=\"https:\/\/html5boilerplate.com\/\">HTML5 Boilerplate<\/a> faz o mesmo em um n\u00edvel geral de design.<\/p>\n<p>Como tal, inclui sete arquivos que abrangem HTML, CSS e JavaScript. Todos eles cont\u00eam apenas os arquivos e c\u00f3digos mais necess\u00e1rios para renderizar uma p\u00e1gina. Al\u00e9m desse ponto, a forma como sua p\u00e1gina se apresenta depende de voc\u00ea.<\/p>\n<p>O HTML5 Boilerplate tem muitos adeptos porque \u00e9 mais um utilit\u00e1rio que economiza tempo do que uma estrutura completa. Assim, n\u00e3o h\u00e1 visuais fora da caixa para &#8220;passar o com\u00e9rcio&#8221;, mas se voc\u00ea pressionar o HTML5 Boilerplate para entrar em servi\u00e7o, voc\u00ea pode descobrir que ele acelera seu desenvolvimento da maneira como o Underscores faz para os desenvolvedores do WordPress.<\/p>\n<h4>27. Materialize<\/h4>\n<p>Embora n\u00e3o chamar\u00edamos de <a href=\"https:\/\/materializecss.com\/\">Materialize<\/a> um concorrente do Material-UI, \u00e9 outra estrutura que procura usar os princ\u00edpios do Design de Material para criar um layout:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/materialize.png\" alt=\"A p\u00e1gina inicial Materialize.\" width=\"900\" height=\"362\"><figcaption class=\"wp-caption-text\">A p\u00e1gina inicial Materialize.<\/figcaption><\/figure>\n<p>No entanto, em vez de usar o React, o Materialize \u00e9 uma estrutura de CSS. Isso torna a Materializa\u00e7\u00e3o mais f\u00e1cil de ser implementada no front-end. Muito como outros frameworks baseados em CSS, voc\u00ea usa classes dentro do HTML para puxar os elementos no front-end.<\/p>\n<p>Dito isto, tamb\u00e9m h\u00e1 um monte de componentes JavaScript, para elementos como os modais e dropdowns:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/materialize-dropdown.png\" alt=\"Um menu suspenso criado com o Materialize.\" width=\"900\" height=\"552\"><figcaption class=\"wp-caption-text\">Um menu suspenso criado com o Materialize.<\/figcaption><\/figure>\n<p>Como muitas dessas estruturas, existem <a href=\"https:\/\/materializecss.com\/themes.html\">temas de alta qualidade<\/a> que ajudam a construir layouts em um estilo espec\u00edfico. No entanto, todos eles s\u00e3o temas HTML est\u00e1ticos, o que pode ser um problema se voc\u00ea quiser implementar o JavaScript. Nestes casos, voc\u00ea pode querer considerar Material-UI em vez disso.<\/p>\n<h3>Estruturas de aplicativos web<\/h3>\n<p>Simplificando, um <a href=\"https:\/\/kinqsta.com\/pt\/blog\/bibliotecas-javascript\/\">framework ou biblioteca JavaScript<\/a> permite que voc\u00ea trabalhe com o chamado c\u00f3digo &#8220;vanilla&#8221; de maneira diferente. Neste caso, \u00e9 para criar aplicativos e sites espec\u00edficos na web. H\u00e1 muitos &#8220;sabores&#8221; tamb\u00e9m &#8211; vamos cobrir alguns.<\/p>\n<h4>28. React.js<\/h4>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/react-js.png\" alt=\"Um exemplo do c\u00f3digo React sandbox.\" width=\"1500\" height=\"523\"><figcaption class=\"wp-caption-text\">Um exemplo do c\u00f3digo React sandbox.<\/figcaption><\/figure>\n<p><a href=\"https:\/\/reactjs.org\/\">React.js<\/a> \u00e9 uma popular biblioteca JavaScript projetada no Facebook que alimenta muitos dos elementos mais modernos do WordPress. Tanto o <a href=\"https:\/\/developer.wordpress.com\/calypso\/\">back-end do WordPress.com<\/a> quanto o Block Editor usam React, e n\u00f3s o considerar\u00edamos uma primeira maneira de usar o JavaScript como interface.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/wordpress-com.png\" alt=\"O backend Calypso para WordPress.com \u00e9 constru\u00eddo sobre o React.\" width=\"900\" height=\"522\"><figcaption class=\"wp-caption-text\">O back-end Calypso para WordPress.com \u00e9 constru\u00eddo sobre o React.<\/figcaption><\/figure>\n<p>Como tal, os desenvolvedores do WordPress devem &#8211; <a href=\"https:\/\/ma.tt\/2015\/12\/state-of-the-word-2015\/\">parafraseando Matt Mullenweg<\/a> &#8211; aprender a React.js profundamente. No entanto, n\u00e3o \u00e9 apenas uma estrutura para desenvolvedores de WordPress.<\/p>\n<p>Onde quer que voc\u00ea precise de uma Interface de Usu\u00e1rio (IU) moderna e din\u00e2mica, Reagir ser\u00e1 a primeira escolha. Ela usa uma extens\u00e3o de sintaxe para JavaScript chamada JSX para criar elementos, que s\u00e3o ent\u00e3o renderizados para o M\u00f3dulo de Objeto do Documento (DOM):<\/p>\n<pre><code>const name = \"Ken Starr';\n\nconst element = &lt;h1&gt;Hello, {name}&lt;\/h1&gt;;\n\nReactDOM.render\n  Element,\n  document.getElementById('root')\n);<\/code><\/pre>\n<p>A vari\u00e1vel JavaScript dentro do JSX pode ser qualquer express\u00e3o v\u00e1lida, o que lhe permite construir argumentos complexos. Isso faz da Reagir uma escolha forte quando se trata de estruturas. Por causa de sua popularidade, achamos que o <a href=\"https:\/\/kinqsta.com\/pt\/blog\/bibliotecas-javascript\/#reactjs\">React deveria estar em sua lista &#8220;mustlearn&#8221;<\/a>, independentemente de onde voc\u00ea gaste seu tempo de desenvolvimento.<\/p>\n<h4>29. Vue.js<\/h4>\n<p>O <a href=\"https:\/\/kinqsta.com\/pt\/blog\/vue-js\/\">Vue.js<\/a> \u00e9 outra estrutura JavaScript para a constru\u00e7\u00e3o de interfaces de usu\u00e1rio. \u00c9 baseado na &#8220;camada de visualiza\u00e7\u00e3o&#8221; e \u00e9 \u00f3timo para integra\u00e7\u00e3o com outras bibliotecas e frameworks.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/vue-js.png\" alt=\"A caixa de areia Vue.js.\" width=\"1500\" height=\"867\"><figcaption class=\"wp-caption-text\">A caixa de areia Vue.js.<\/figcaption><\/figure>\n<p>No lado do HTML, a Vue n\u00e3o poderia ser mais acess\u00edvel. Voc\u00ea d\u00e1 \u00e0 sua tag uma identifica\u00e7\u00e3o e chama uma chave de um conjunto de dicion\u00e1rios no lado JavaScript. Os dados agora s\u00e3o reativos, e os dados e DOM s\u00e3o vinculados.<\/p>\n<p>Desta forma, o Vue.js \u00e9 muito parecido com algumas das estruturas de CSS que examinamos anteriormente no artigo. Esta estrutura \u00e9 convincente, e n\u00f3s o encorajamos a olhar <a href=\"https:\/\/vuejs.org\/v2\/guide\/\">atrav\u00e9s da documenta\u00e7\u00e3o<\/a> para ver o que \u00e9 poss\u00edvel.<\/p>\n<p>Embora o Vue.js ap\u00f3ie as declara\u00e7\u00f5es JSX, \u00e9 mais adequado utilizar modelos baseados nas tecnologias &#8220;cl\u00e1ssicas&#8221; da web. Como tal, ele ser\u00e1 ideal para desenvolvedores que n\u00e3o querem trabalhar somente em JavaScript.<\/p>\n<h4>30. Express.js<\/h4>\n<p>Estamos entrando no territ\u00f3rio da meta-estrutura aqui, j\u00e1 que o <a href=\"http:\/\/expressjs.com\/\">Express.js<\/a> se conecta ao <a href=\"https:\/\/nodejs.org\/en\/\">Node.js<\/a> e fornece uma base para outras estruturas.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/express.png\" alt=\"A p\u00e1gina inicial do Express.js.\" width=\"900\" height=\"443\"><figcaption class=\"wp-caption-text\">A p\u00e1gina inicial do Express.js.<\/figcaption><\/figure>\n<p>\u00c9 uma estrutura minimalista (da\u00ed o nome), e um benef\u00edcio primordial \u00e9 ajudar a organizar os componentes do lado do servidor em um formato familiar de Model-View-Controller (MVC). Como tal, o c\u00f3digo parece mais complicado do que outras estruturas &#8211; mesmo o JavaScript de baunilha:<\/p>\n<pre><code>var express = require('express');\n\nvar app = express();\n\napp.get('\/', function(req, res){\n  res.send(\"Hello world!\");\n});\n\napp.listen(3000);<\/code><\/pre>\n<p>Pensamos que o Express.js vai se adequar ao aplicativo que puxam e empurram muito dos bancos de dados. Isso o torna adequado para muitos aplicativos web modernas e desenvolvedores back-end que querem trabalhar em tarefas front-end com um m\u00ednimo de estresse.<\/p>\n<h4>31. Svelte.js<\/h4>\n<p>Uma regra s\u00f3lida ao desenvolver para a web \u00e9 garantir que seus sites funcionem em tantos navegadores quanto poss\u00edvel. Dito isto, em alguns casos, voc\u00ea pode querer construir aplicativos ou sites sem suportar navegadores legados. Nestes casos, o <a href=\"http:\/\/sveltejs.com\/\">Svelte.js<\/a> deve estar perto do topo de sua lista.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/svelte.png\" alt=\"A p\u00e1gina inicial do Svelte.js.\" width=\"900\" height=\"206\"><figcaption class=\"wp-caption-text\">A p\u00e1gina inicial do Svelte.js.<\/figcaption><\/figure>\n<p>A estrutura recebe seu nome devido ao tamanho do seu arquivo &#8211; apenas 5kb uma vez minerada. Ela tem um formato parecido com jQuery- que ser\u00e1 f\u00e1cil para usu\u00e1rios familiares:<\/p>\n<pre><code>$('.hello').text(\"Hello svelte\");<\/code><\/pre>\n<p>H\u00e1 menos de 40 fun\u00e7\u00f5es dentro do Svelte API, portanto, o in\u00edcio ser\u00e1 simples. Al\u00e9m disso, voc\u00ea pode adicionar novas fun\u00e7\u00f5es com facilidade usando <code>$.fn<\/code>.<\/p>\n<p>Voc\u00ea encontrar\u00e1 &#8220;polyfills&#8221; para suporte ao Internet Explorer 9, mas esta \u00e9 quase a \u00fanica concess\u00e3o. Para suporte de browser hiper-moderno usando uma estrutura super-limpa, Svelte.js poderia ser a \u00fanica para voc\u00ea.<\/p>\n<h4>32. Laravel<\/h4>\n<p>At\u00e9 agora, examinamos as estruturas JavaScript ou CSS. Dada a preval\u00eancia do PHP, faz sentido cobrir uma estrutura para esta linguagem tamb\u00e9m. <a href=\"https:\/\/laravel.com\/\">Laravel<\/a> \u00e9 a escolha ideal aqui, pois \u00e9 popular entre muitos desenvolvedores por sua sintaxe e ecossistema:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/laravel.png\" alt=\"A p\u00e1gina inicial de Laravel.\" width=\"900\" height=\"562\"><figcaption class=\"wp-caption-text\">A p\u00e1gina inicial de Laravel.<\/figcaption><\/figure>\n<p>\u00c9 mais apropriado dizer que <a href=\"https:\/\/kinqsta.com\/pt\/blog\/o-que-e-laravel\/\">Laravel \u00e9 um ecossistema<\/a>, pois inclui muitas ferramentas para ajud\u00e1-lo a construir projetos. Mesmo que voc\u00ea n\u00e3o use muito da estrutura em si, voc\u00ea pode usar o <a href=\"https:\/\/laravel.com\/docs\/8.x\/homestead\">Laravel&#8217;s Homestead<\/a>, um ambiente de desenvolvimento local baseado em Vagrantes.<\/p>\n<p>O pr\u00f3prio Laravel \u00e9 uma estrutura PHP baseada em Docker e usa um CLI (chamado Sail) para interagir com ele. Assim como o Vagrant, voc\u00ea usar\u00e1 a vela para construir containers e execut\u00e1-los.<\/p>\n<p>Laravel tem muito mais cordas em seu arco, no entanto. Por exemplo, voc\u00ea pode us\u00e1-lo como uma estrutura completa, um back-end API para <a href=\"https:\/\/kinqsta.com\/pt\/blog\/next-js\/\">aplicativos Next.js<\/a>, e quase tudo o que est\u00e1 entre eles.<\/p>\n<p>Se voc\u00ea \u00e9 um desenvolvedor PHP, Laravel ser\u00e1 uma ferramenta central (se n\u00e3o estiver familiarizado) para seu fluxo de trabalho.<\/p>\n<h4>33. Gatsby<\/h4>\n<p><a href=\"https:\/\/www.gatsbyjs.com\/\">Gatsby<\/a> \u00e9 uma estrutura de front-end de c\u00f3digo aberto que tem atra\u00eddo muita aten\u00e7\u00e3o nos \u00faltimos tempos. \u00c9 porque o Gatsby \u00e9 r\u00e1pido, escal\u00e1vel, performante e seguro.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/gatsby.png\" alt=\"A p\u00e1gina inicial de Gatsby.\" width=\"900\" height=\"401\"><figcaption class=\"wp-caption-text\">A p\u00e1gina inicial de Gatsby.<\/figcaption><\/figure>\n<p>H\u00e1 um <a href=\"https:\/\/www.gatsbyjs.com\/docs\/quick-start\/\">processo de instala\u00e7\u00e3o super-r\u00e1pido<\/a> envolvendo o Node Package Manager (npm). Teremos mais sobre isso mais tarde. Embora seja um framework JavaScript, Gatsby gera arquivos HTML est\u00e1ticos em tempo de execu\u00e7\u00e3o, portanto n\u00e3o h\u00e1 maneira de atacar um site. Al\u00e9m disso, Gatsby automatiza o desempenho para manter seu site funcionando em uma configura\u00e7\u00e3o ideal.<\/p>\n<p>Entre o desempenho automatizado, o dimensionamento din\u00e2mico e o edif\u00edcio HTML est\u00e1tico, Gatsby se sente como um organismo vivo. H\u00e1 uma complexa &#8220;maquiagem&#8221; de codifica\u00e7\u00e3o envolvendo JSX, Markdown, CSS, e muito mais baseada em suas necessidades. Cada <a href=\"https:\/\/www.gatsbyjs.com\/docs\/how-to\/\">passo do seu fluxo de trabalho<\/a> e cada parte de sua pilha pode ser adaptada \u00e0s suas necessidades.<\/p>\n<p>Os desenvolvedores do WordPress tamb\u00e9m v\u00e3o gostar de como <a href=\"https:\/\/kinqsta.com\/pt\/blog\/gatsby-e-wordpress\/\">o Gatsby se integra com a plataforma<\/a>. No entanto, n\u00e3o ser\u00e1 adequado em todos os casos. Por exemplo, se voc\u00ea precisa gerenciar um CMS baseado em nuvens por completo, isto n\u00e3o \u00e9 para voc\u00ea. Mesmo assim, Gatsby pode se adaptar ao seu projeto na maioria dos casos, e funciona muito bem com o<\/p>\n<h4>34. Django<\/h4>\n<p>Por toda a conversa de que Python \u00e9 uma linguagem de programa\u00e7\u00e3o &#8220;iniciante&#8221; ou &#8220;aprendendo&#8221;, ela serve como a espinha dorsal para muitos sites de alto perfil. Alguns dos <a href=\"https:\/\/learn.onemonth.com\/10-famous-websites-built-using-python\/\">maiores sites<\/a> &#8211; Instagram, Uber, Reddit, Pinterest, e mais &#8211; usam Django. Muitas vezes, voc\u00ea n\u00e3o encontrar\u00e1 nenhuma men\u00e7\u00e3o ao pr\u00f3prio Python, <a href=\"https:\/\/djangoproject.com\/\">mas apenas ao Django<\/a>.<\/p>\n<p>Django \u00e9 uma estrutura que usa Python para criar aplicativos web do lado do servidor. \u00c9 t\u00e3o simples de usar como o pr\u00f3prio Python, com um formato uber-read\u00edvel.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/django-formatting.png\" alt=\"A formata\u00e7\u00e3o padr\u00e3o de Django.\" width=\"900\" height=\"229\"><figcaption class=\"wp-caption-text\">A formata\u00e7\u00e3o padr\u00e3o de Django.<\/figcaption><\/figure>\n<p><a href=\"https:\/\/kinqsta.com\/pt\/blog\/linguagens-de-script\/#3-python\">Python<\/a> \u00e9 uma \u00f3tima linguagem de script para projetos baseados em l\u00f3gica, portanto, alavancar isto para um aplicativo web \u00e9 um bom ajuste. Al\u00e9m disso, a velocidade de processamento do Python \u00e9 r\u00e1pida, e a estrutura de arquivo fundamental \u00e9 leve. Por ser r\u00e1pido, Django \u00e9 uma excelente estrutura do lado do servidor em compara\u00e7\u00e3o com PHP e tem tanto grunhido quanto a linguagem mais popular.<\/p>\n<p>Dito isto, a absor\u00e7\u00e3o \u00e9 menor, o que pode ser devido \u00e0 reputa\u00e7\u00e3o de Python como uma l\u00edngua de aprendizagem. Apesar disso, Django trabalha bem com outras linguagens, como o JavaScript, para ser a base de um aplicativo web moderna.<\/p>\n<p>\u00c9 claro, se voc\u00ea planeja usar um CMS como o WordPress, ou est\u00e1 criando solu\u00e7\u00f5es para projetos baseados em Rea\u00e7\u00f5es, voc\u00ea tem menos op\u00e7\u00f5es. Mesmo assim, pensamos que veremos um aumento no n\u00famero de sites rodando no Django.<\/p>\n<h4>35. Ruby on Rails<\/h4>\n<p>A linguagem de programa\u00e7\u00e3o Ruby era a &#8220;querida&#8221; das linguagens para iniciantes e alternativas de script para PHP alguns anos atr\u00e1s. Ela \u00e9 frequentemente comparada ao Python.<\/p>\n<p>E assim como Django, <a href=\"https:\/\/rubyonrails.org\/\">Ruby on Rails<\/a> tamb\u00e9m era um dos favoritos de muitos desenvolvedores.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/ruby-on-rails.png\" alt=\"A p\u00e1gina de espa\u00e7o reservado para um novo projeto Ruby on Rails.\" width=\"900\" height=\"426\"><figcaption class=\"wp-caption-text\">A p\u00e1gina de espa\u00e7o reservado para um novo projeto Ruby on Rails.<\/figcaption><\/figure>\n<p>Voc\u00ea encontrar\u00e1 o Ruby usado em muitos aplicativos web de servidor e de baixo n\u00edvel. Al\u00e9m disso, o Ruby on Rails \u00e9 usado como uma estrutura do lado do servidor em in\u00fameros sites. Ele usa uma abordagem MVC e oferece estruturas para o servi\u00e7o web, p\u00e1ginas e um banco de dados. Como tal, voc\u00ea tem um site de barebones \u00e0 sua espera, fora da caixa.<\/p>\n<p>A Ruby on Rails se adequar\u00e1 ao seu projeto se precisar programar muitos trabalhos e trabalhar com solu\u00e7\u00f5es de terceiros. Por exemplo, h\u00e1 uma integra\u00e7\u00e3o nativa com armazenamento de arquivos como o <a href=\"https:\/\/cloud.google.com\/storage\/\">Google Cloud<\/a>, e um inv\u00f3lucro para envio de e-mails.<\/p>\n<p>No geral, \u00e9 uma boa escolha se voc\u00ea quiser um conjunto robusto de padr\u00f5es (como estrutura de pastas) que pode ser personalizado, se necess\u00e1rio. Por outro lado, n\u00e3o \u00e9 uma boa escolha se voc\u00ea gosta de usar APIs durante o desenvolvimento.<\/p>\n<p>A estrutura de c\u00f3digo do Ruby on Rails pode se tornar complexa e desafiadora de se entender com grandes projetos. O tempo de execu\u00e7\u00e3o tamb\u00e9m pode ser afetado, portanto pode n\u00e3o ser a melhor estrutura para projetos cr\u00edticos de velocidade.<\/p>\n<p>Ainda assim, Ruby on Rails \u00e9 um dos frameworks l\u00edderes do lado do servidor web, e seu uso n\u00e3o est\u00e1 diminuindo a velocidade para projetos adequados.<\/p>\n<h4>36. TypeScript<\/h4>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/typescript-code.png\" alt=\"Um exemplo de c\u00f3digo TypeScript.\" width=\"1500\" height=\"582\"><figcaption class=\"wp-caption-text\">Um exemplo de c\u00f3digo TypeScript.<\/figcaption><\/figure>\n<p>Em poucas palavras, o <a href=\"https:\/\/www.typescriptlang.org\/\">TypeScript<\/a> fornece &#8220;typechecking&#8221; est\u00e1tico opcional ao JavaScript. \u00c9 um &#8220;super conjunto&#8221; da linguagem, e tamb\u00e9m suporta muitas outras bibliotecas de JavaScript. No geral, o TypeScript \u00e9 JavaScript com algumas caracter\u00edsticas extras, e voc\u00ea pode compilar as duas linguagens uma ao lado da outra.<\/p>\n<p>Muitos desenvolvedores recorreram ao TypeScript para reduzir o n\u00famero de erros de tempo de execu\u00e7\u00e3o que recebem. Os erros de digita\u00e7\u00e3o s\u00e3o <a href=\"http:\/\/gria.org\/programming-errors-three-common-types\/\">um dos mais comuns<\/a>, e reduzi-los poderia lhe dar muito tempo extra de volta.<\/p>\n<p>Para um exemplo muito simples de TypeScript, considere uma string:<\/p>\n<p>let helloWorld = &#8220;Hello World&#8221;;<\/p>\n<p>\/\/ \u00a0^ = let helloWorld: string<\/p>\n<p>Aqui, o TypeScript usa let em vez do habitual var para a vari\u00e1vel helloWorld. A partir da\u00ed, a TypeScript sabe que o helloWorld \u00e9 uma string e a verifica com base nisso.<\/p>\n<p>Em \u00faltima an\u00e1lise, o TypeScript n\u00e3o \u00e9 uma ferramenta essencial de desenvolvimento web, embora tenha se tornado mais popular devido a sua caracter\u00edstica principal de marquise. Se voc\u00ea acabar economizando algum tempo muito necess\u00e1rio, pode se tornar vital para seu fluxo de trabalho.<\/p>\n<h4>37. GraphQL<\/h4>\n<p>Aqui est\u00e1 uma ferramenta \u00fanica que pode encontrar favor entre os desenvolvedores que trabalham com os dados dentro de uma API. <a href=\"https:\/\/graphql.org\/\">GraphQL<\/a> \u00e9 uma linguagem de consulta utilizada em uma API que tamb\u00e9m atua como um tempo de execu\u00e7\u00e3o para servir os resultados da consulta que voc\u00ea faz.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/graphql.png\" alt=\"O site GraphQL.\" width=\"900\" height=\"606\"><figcaption class=\"wp-caption-text\">O site GraphQL.<\/figcaption><\/figure>\n<p>Com uma API REST padr\u00e3o, muitas vezes voc\u00ea tem que carregar a partir de m\u00faltiplas URLs. Com GraphQL, voc\u00ea pode obter dados a partir de uma \u00fanica solicita\u00e7\u00e3o. Al\u00e9m disso, os GraphQL APIs s\u00e3o organizados por tipo e n\u00e3o por pontos finais. Esta classifica\u00e7\u00e3o ajuda na efici\u00eancia de sua consulta e fornece erros mais expl\u00edcitos quando algo d\u00e1 errado.<\/p>\n<p>Os tipos tamb\u00e9m podem ser usados para saltar o c\u00f3digo de an\u00e1lise manual, dada a forma como o GraphQL os implementa. Voc\u00ea tamb\u00e9m \u00e9 capaz de adicionar novos campos e tipos \u00e0 sua API sem impactar o trabalho realizado at\u00e9 o momento.<\/p>\n<p>A ferramenta \u00e9 flex\u00edvel e escal\u00e1vel em muitas \u00e1reas. Como o GraphQL cria uma API uniforme para seu projeto, voc\u00ea pode puxar um motor que corresponda ao idioma do seu projeto escolhido. Isso o torna \u00f3timo para uma ampla gama de aplicativos, em vez de uma solu\u00e7\u00e3o de nicho para um problema generalizado.<\/p>\n<p>Voc\u00ea encontrar\u00e1 GraphQL usado em sites como GitHub, Spotify, Facebook, e muito mais. Ele deve lhe dar uma id\u00e9ia de como o GraphQL \u00e9 usado em sites de consulta de todas as listras. Como tal, voc\u00ea pode precisar recorrer a esta solu\u00e7\u00e3o mais de uma vez durante os pr\u00f3ximos 12 meses e al\u00e9m.<\/p>\n<h3>Gerenciador de pacotes<\/h3>\n<p>Linguagens de programa\u00e7\u00e3o, estruturas e muito mais t\u00eam muitas pe\u00e7as m\u00f3veis. Estas depend\u00eancias devem ser baixadas e instaladas da maneira correta para funcionar. Insira os gerentes de pacotes. Estes o ajudam a baixar e instalar depend\u00eancias espec\u00edficas a partir da linha de comando. Vamos analisar algumas ferramentas com as quais voc\u00ea se deparar\u00e1.<\/p>\n<h4>38. Node Package Manager (npm)<\/h4>\n<p>Sim, o download de instaladores tem seu lugar. Entretanto, usar um gerenciador de pacotes a partir da linha de comando \u00e9 super simples na maioria dos casos. Ele tamb\u00e9m fornece uma maneira zippy de pegar e instalar arquivos da web.<\/p>\n<p>O <a href=\"https:\/\/www.npmjs.com\/\">Node Package Manager (npm)<\/a> \u00e9 uma ferramenta de desenvolvimento web espec\u00edfica para JavaScript de propriedade da Microsoft que permite a instala\u00e7\u00e3o de pacotes de linguagem espec\u00edfica sob demanda:<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/npm.png\" alt=\"A p\u00e1gina inicial da npm.\" width=\"1500\" height=\"572\"><figcaption class=\"wp-caption-text\">A p\u00e1gina inicial da npm.<\/figcaption><\/figure>\n<p>Por exemplo, a busca de pacotes React traz mais de 155.000 resultados:<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/npm-react-search.png\" alt=\"Uma busca realizada em npm.\" width=\"1500\" height=\"840\"><figcaption class=\"wp-caption-text\">Uma busca realizada em npm.<\/figcaption><\/figure>\n<p>Como com uma IDE online, npm \u00e9 uma ferramenta de desenvolvimento web que n\u00e3o recebe muito &#8220;tempo de antena&#8221;, principalmente porque \u00e9 onipresente. Como tal, praticamente todo desenvolvedor web vai utilizar esta ferramenta.<\/p>\n<p>Entretanto, \u00e9 incr\u00edvel, e agora que est\u00e1 sob a ala de GitHub, mais desenvolvedores usar\u00e3o npm em um futuro pr\u00f3ximo.<\/p>\n<h4>39. Yarn<\/h4>\n<p>Muito como npm e pip para Python, <a href=\"https:\/\/yarnpkg.com\/\">Yarn<\/a> ajuda voc\u00ea a instalar pacotes relacionados ao seu projeto e suas ferramentas. A diferen\u00e7a aqui \u00e9 que o Yarn tamb\u00e9m \u00e9 uma ferramenta de gerenciamento de projeto.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/yarn.png\" alt=\"A p\u00e1gina inicial do Yarn.\" width=\"900\" height=\"302\"><figcaption class=\"wp-caption-text\">A p\u00e1gina inicial do Yarn.<\/figcaption><\/figure>\n<p><a href=\"https:\/\/yarnpkg.com\/getting-started\/install\">A instala\u00e7\u00e3o \u00e9 simples<\/a>, e inicializar o Yarn para um novo projeto tamb\u00e9m requer um <a href=\"https:\/\/yarnpkg.com\/getting-started\/usage\">m\u00ednimo de esfor\u00e7o<\/a>. Tornou-se uma solu\u00e7\u00e3o robusta <a href=\"https:\/\/yarnpkg.com\/getting-started\/qa#is-yarn-operated-by-facebook\">solu\u00e7\u00e3o robusta de c\u00f3digo aberto<\/a> para instalar pacotes e gerenciar seu projeto ao lado.<\/p>\n<p>Voc\u00ea <a href=\"https:\/\/yarnpkg.com\/features\/workspaces\">usar\u00e1 espa\u00e7os de trabalho<\/a> para criar &#8220;monorepos&#8221; e m\u00faltiplas vers\u00f5es do seu projeto, ambas vivem na mesma repo e podem ser referenciadas cruzadas. Voc\u00ea pode instalar plugins para qualquer coisa que as threads n\u00e3o possam fazer (para os quais voc\u00ea deseja adicionar novos fetchers e resolvedores). Para ser mais preciso, voc\u00ea <em>poderia <\/em>instalar plugins, mas <a href=\"https:\/\/yarnpkg.com\/features\/plugins#official-plugins\">n\u00e3o h\u00e1 muitos<\/a>, pelo menos nas listas oficiais. Em vez disso, voc\u00ea codificar\u00e1 o seu pr\u00f3prio se estiver desesperado pela funcionalidade. Mesmo assim, a escolha est\u00e1 a\u00ed para personalizar as threads de acordo com as necessidades do seu projeto.<\/p>\n<p>O Yarn faz um caso \u00fanico para se tornar seu principal gerente de embalagem. Para um projeto do mundo real, voc\u00ea pode se apoiar mais na npm, mas a Yarn entrar\u00e1 furtivamente em seu fluxo de trabalho de maneiras que s\u00f3 podem lhe beneficiar.<\/p>\n<h3>API e ferramentas de teste<\/h3>\n<p>Assegurar que as coisas funcionem \u00e9 um processo muitas vezes ignorado, mas tamb\u00e9m vem com arrependimentos quando as coisas d\u00e3o errado. Como tal, a fase de testes do seu projeto deve ser s\u00f3lida, robusta e completa.<\/p>\n<p>Diante disto, aqui est\u00e3o algumas API e ferramentas de teste que voc\u00ea ter\u00e1 \u00e0 disposi\u00e7\u00e3o para seus projetos.<\/p>\n<h4>40. HoppScotch<\/h4>\n<p>Acionada pela Netlify, a <a href=\"https:\/\/hoppscotch.io\/\">HoppScotch<\/a> \u00e9 uma ferramenta de desenvolvimento de API de c\u00f3digo aberto. Os desenvolvedores a chamam de &#8220;ecossistema&#8221;, o que desmente a funcionalidade sob o cap\u00f4.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/hoppscotch.png\" alt=\"A p\u00e1gina principal da HoppScotch.\" width=\"900\" height=\"420\"><figcaption class=\"wp-caption-text\">A p\u00e1gina principal da HoppScotch.<\/figcaption><\/figure>\n<p>\u00c9 uma solu\u00e7\u00e3o sem sentido e robusta, e n\u00e3o para os fracos de cora\u00e7\u00e3o. A curva de aprendizado, se voc\u00ea nunca usou uma ferramenta como esta, \u00e9 \u00edngreme. Quase n\u00e3o h\u00e1 dire\u00e7\u00e3o para o uso do HoppScotch em nenhuma das p\u00e1ginas do aplicativo, embora isso n\u00e3o seja geralmente um problema, pois a ferramenta \u00e9 destinada a desenvolvedores experientes de qualquer forma.<\/p>\n<p>H\u00e1 muitas conex\u00f5es em tempo real (WebSocket, SSE, e mais), e uma implanta\u00e7\u00e3o de GraphQL. N\u00f3s tamb\u00e9m gostamos do criador da documenta\u00e7\u00e3o:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/hoppscotch-documentation.png\" alt=\"A tela do criador da documenta\u00e7\u00e3o HoppScotch.\" width=\"900\" height=\"522\"><figcaption class=\"wp-caption-text\">A tela do criador da documenta\u00e7\u00e3o HoppScotch.<\/figcaption><\/figure>\n<p>Ele trabalha com suas &#8220;cole\u00e7\u00f5es&#8221; HoppScotch para criar documenta\u00e7\u00e3o sobre a mosca, o que \u00e9 uma bem-vinda economia de tempo.<\/p>\n<p>No geral, o HoppScotch \u00e9 uma ferramenta funcional que estar\u00e1 muito aberta em seu navegador. \u00c9 uma daquelas solu\u00e7\u00f5es que voc\u00ea sempre usar\u00e1 sem perceber &#8211; n\u00e3o podemos elogi\u00e1-lo mais do que isso!<\/p>\n<h4>41. Postman<\/h4>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/postman-logo.png\" alt=\"O logotipo Postman.\" width=\"1500\" height=\"486\"><figcaption class=\"wp-caption-text\">O logotipo Postman.<\/figcaption><\/figure>\n<p>Aviso &#8211; estamos prestes a mencionar a temida palavra &#8220;C&#8221;: <em>colabora\u00e7\u00e3o<\/em>. <a href=\"http:\/\/postman.com\">Postman<\/a> \u00e9 uma ferramenta de desenvolvimento web que ajuda a criar uma <a href=\"https:\/\/kinqsta.com\/pt\/blog\/wordpress-rest-api\/\">Interface de Programa\u00e7\u00e3o de aplicativos (API)<\/a> como uma equipe atrav\u00e9s da plataforma Postman:<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/postman-dashboard.png\" alt=\"O painel do Postman.\" width=\"1500\" height=\"868\"><figcaption class=\"wp-caption-text\">O painel do Postman.<\/figcaption><\/figure>\n<p>H\u00e1 muitos <a href=\"https:\/\/www.postman.com\/use-cases\/\">casos de uso<\/a> para integrar o carteiro em seu fluxo de trabalho. Por exemplo, voc\u00ea pode us\u00e1-lo de forma padr\u00e3o para o desenvolvimento de aplicativos, o que se traduzir\u00e1 diretamente em projetos baseados na web. Voc\u00ea pode simular pontos finais usando servidores mock, o que vai atrair especialmente os desenvolvedores do WordPress.<\/p>\n<p>Voc\u00ea pode at\u00e9 mesmo <a href=\"https:\/\/www.postman.com\/use-cases\/developer-onboarding\/\">criar um sistema onboarding<\/a> para ajudar os usu\u00e1rios de suas APIs a aprender o b\u00e1sico. Os projetos com alta rotatividade de usu\u00e1rios ou tr\u00e1fego ser\u00e3o beneficiados com isso.<\/p>\n<p>Quanto aos pre\u00e7os, o carteiro oferece um n\u00edvel gratuito, mas voc\u00ea obter\u00e1 o maior valor de um dos <a href=\"https:\/\/www.postman.com\/pricing\/\">n\u00edveis premium<\/a>. Voc\u00ea procurar\u00e1 pagar cerca de US$ 12-30, dependendo do seu ciclo de cobran\u00e7a e do n\u00famero de usu\u00e1rios.<\/p>\n<h4>42. Testing Library<\/h4>\n<p>O c\u00f3digo que funciona \u00e9 ideal, mas os aplicativos que funcionam s\u00e3o o objetivo final. A <a href=\"https:\/\/testing-library.com\/\">Tes<\/a><a href=\"https:\/\/testing-library.com\/\">ting Library<\/a> faz como seu nome sugere: ela fornece um conjunto de utilit\u00e1rios para ajud\u00e1-lo a testar seus projetos e encoraj\u00e1-lo a usar boas pr\u00e1ticas de codifica\u00e7\u00e3o.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/testing-library.png\" alt=\"A p\u00e1gina inicial da Testing Library.\" width=\"900\" height=\"265\"><figcaption class=\"wp-caption-text\">A p\u00e1gina inicial da Testing Library.<\/figcaption><\/figure>\n<p>A id\u00e9ia \u00e9 que voc\u00ea crie testes que representem seu uso do aplicativo. Se eles funcionarem sem problemas, as chances s\u00e3o boas de que seu aplicativo tamb\u00e9m funcionar\u00e1. \u00c9 uma ferramenta agn\u00f3stica em rela\u00e7\u00e3o \u00e0 estrutura, e n\u00e3o \u00e9 um test runner. O objetivo central da Biblioteca de Testes \u00e9 ajudar voc\u00ea a escrever testes que possam ser mantidos desacoplados dos detalhes de implanta\u00e7\u00e3o.<\/p>\n<p>Tudo dentro da ferramenta Testing Library centra-se em torno de seus <a href=\"https:\/\/testing-library.com\/docs\/guiding-principles\/\">princ\u00edpios orientadores<\/a>. Como tal, voc\u00ea n\u00e3o est\u00e1 apenas criando testes &#8211; voc\u00ea est\u00e1 aprendendo como torn\u00e1-los melhores e mais valiosos.<\/p>\n<p>Por causa disso, a Biblioteca de testes pode se tornar uma grande parte do seu fluxo de trabalho. Argumentar\u00edamos que quase todas as strings de projetos poderiam se beneficiar da Testing Library, e os usu\u00e1rios da React quase certamente querer\u00e3o implantar esta ferramenta como um padr\u00e3o.<\/p>\n<h3>Ferramentas de colabora\u00e7\u00e3o<\/h3>\n<p>Apesar do tropo dos desenvolvedores ser anti-social, a verdade \u00e9 que tecnologia e colabora\u00e7\u00e3o andam de m\u00e3os dadas.<\/p>\n<p>Como tal, vamos reunir algumas ferramentas de colabora\u00e7\u00e3o que ir\u00e3o se encaixar em seu pr\u00f3ximo projeto.<\/p>\n<h4>43. Jira<\/h4>\n<p>A <a href=\"https:\/\/www.atlassian.com\/software\">Atlassian<\/a> \u00e9 uma empresa muito apreciada quando se trata de software. Somos grandes f\u00e3s de algumas das ofertas da empresa: Confluence, Trello, Sourcetree, Bitbucket, e nosso foco aqui, <a href=\"https:\/\/www.atlassian.com\/software\/jira\/\">Jira<\/a>.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/jira.png\" alt=\"A p\u00e1gina inicial da Jira.\" width=\"900\" height=\"508\"><figcaption class=\"wp-caption-text\">A p\u00e1gina inicial da Jira.<\/figcaption><\/figure>\n<p>\u00c9 uma ferramenta de desenvolvimento para equipes que utilizam <a href=\"https:\/\/airfocus.com\/glossary\/what-is-an-agile-framework\/\">estruturas Agile<\/a> &#8211; Scrum em particular, por ser t\u00e3o popular. Por causa disso, voc\u00ea obt\u00e9m uma riqueza de recursos no pacote. Por exemplo, voc\u00ea \u00e9 capaz de usar quadros kanban para ajudar a organizar tarefas e sprints. Voc\u00ea tamb\u00e9m pode implementar sua t\u00e9cnica de estimativa, personalizada para sua metodologia e projeto.<\/p>\n<p>Jira se concentra em um fluxo de trabalho repet\u00edvel: planejar, rastrear, liberar e relatar. \u00c9 central para v\u00e1rias estruturas Agile, embora voc\u00ea tamb\u00e9m possa criar a sua pr\u00f3pria, dependendo do seu planejamento pr\u00e9-projeto. Se voc\u00ea tiver que girar entre os sprints, voc\u00ea pode evoluir seu projeto e escalar para cima ou para baixo.<\/p>\n<p>A grande not\u00edcia sobre Jira \u00e9 que h\u00e1 um n\u00edvel gratuito para come\u00e7ar, e <a href=\"https:\/\/www.atlassian.com\/software\/jira\/pricing\">pre\u00e7os razo\u00e1veis<\/a> para os outros n\u00edveis. Dito isto, voc\u00ea ver\u00e1 que uma equipe de dez pessoas ser\u00e1 o requisito m\u00ednimo para utilizar o Jira efetivamente. Pode ser um exagero para qualquer grupo menor.<\/p>\n<h4>44. Taskade<\/h4>\n<p>Quando se trata de ferramentas de colabora\u00e7\u00e3o, \u00e9 raro encontrar o <a href=\"https:\/\/www.taskade.com\/\">Taskade<\/a>. Ele presta um mau servi\u00e7o ao aplicativo, pois \u00e9 uma ferramenta fant\u00e1stica para manter uma equipe focada e focada no tema.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/taskade.png\" alt=\"O painel de controle do Taskade.\" width=\"900\" height=\"494\"><figcaption class=\"wp-caption-text\">O painel de controle do Taskade.<\/figcaption><\/figure>\n<p>Se voc\u00ea \u00e9 usu\u00e1rio de outras ferramentas de colabora\u00e7\u00e3o, como Asana ou Basecamp (mais sobre ambas mais tarde), voc\u00ea estar\u00e1 em casa aqui. As informa\u00e7\u00f5es de que voc\u00ea mais precisa, tais como doses e lembretes, est\u00e3o centralizadas sob o cap\u00f4. Assim, voc\u00ea pode apresent\u00e1-las de muitas maneiras, dependendo do seu projeto.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/taskade-list-types.png\" alt=\"Os tipos de apresenta\u00e7\u00e3o no Taskade.\" width=\"900\" height=\"418\"><figcaption class=\"wp-caption-text\">Os tipos de apresenta\u00e7\u00e3o no Taskade.<\/figcaption><\/figure>\n<p>Os tipos de visualiza\u00e7\u00e3o &#8220;Mindmap&#8221; e &#8220;Org Chart&#8221; s\u00e3o estelares, e cada um d\u00e1 a voc\u00ea uma perspectiva diferente sobre as informa\u00e7\u00f5es que voc\u00ea adicionou.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/taskade-mindmap.png\" alt=\"Um mapa mental no Taskade.\" width=\"900\" height=\"519\"><figcaption class=\"wp-caption-text\">Um mapa mental no Taskade.<\/figcaption><\/figure>\n<p>O aplicativo \u00e9 enganoso em sua simplicidade. Al\u00e9m de uma maneira flex\u00edvel de apresentar e gerenciar tarefas, pouco mais h\u00e1 a oferecer.<\/p>\n<p>Trabalhar com sua equipe requer um punhado de pressionamentos de bot\u00f5es. Por exemplo, cada tela tem uma janela de bate-papo expans\u00edvel:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/taskade-chat.png\" alt=\"A janela de bate-papo do Taskade.\" width=\"900\" height=\"618\"><figcaption class=\"wp-caption-text\">A janela de bate-papo do Taskade.<\/figcaption><\/figure>\n<p>Para alguns, especialmente quando comparado com outras solu\u00e7\u00f5es, o Taskade poderia ser visto como barebones e at\u00e9 mesmo subequipado. No entanto, n\u00e3o \u00e9 o caso. O Taskade \u00e9 uma forma fant\u00e1stica de colaborar com uma equipe e, por causa de sua simplicidade, ele se encaixa diretamente em qualquer projeto em que voc\u00ea esteja trabalhando.<\/p>\n<h4>45. Asana<\/h4>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/asana.png\" alt=\"A p\u00e1gina inicial do Asana.\" width=\"900\" height=\"459\"><figcaption class=\"wp-caption-text\">A p\u00e1gina inicial do Asana.<\/figcaption><\/figure>\n<p><a href=\"http:\/\/asana.com\">Asana<\/a> \u00e9 um dos nomes mais proeminentes no campo das ferramentas de colabora\u00e7\u00e3o. \u00c9 um monstro quando se trata de agarrar um projeto e chicote\u00e1-lo em forma com a ajuda de uma equipe. O Asana tamb\u00e9m \u00e9 \u00f3timo em adaptar-se a diferentes fluxos de trabalho. Por exemplo, \u00e9 poss\u00edvel alternar entre listas e calend\u00e1rios, mas tamb\u00e9m acessar linhas de tempo tamb\u00e9m.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/asana-workflow-types.png\" alt=\"Tipos de fluxo de trabalho do Asana.\" width=\"900\" height=\"216\"><figcaption class=\"wp-caption-text\">Tipos de fluxo de trabalho do Asana.<\/figcaption><\/figure>\n<p>H\u00e1 tamb\u00e9m algumas caracter\u00edsticas e funcionalidades fant\u00e1sticas baseadas em equipe. Os relat\u00f3rios s\u00e3o abrangentes e, <a href=\"https:\/\/asana.com\/pricing\">em planos superiores<\/a>, voc\u00ea tem acesso a um painel que mostra v\u00e1rias an\u00e1lises relacionadas ao desempenho de sua equipe. H\u00e1 at\u00e9 mesmo uma maneira de monitorar as cargas de trabalho para cada membro da equipe. Assim, o Asana ajuda voc\u00ea a manter a press\u00e3o no m\u00ednimo e evita que os membros da equipe se queimem.<\/p>\n<p>Al\u00e9m disso, o n\u00edvel gratuito n\u00e3o \u00e9 uma demonstra\u00e7\u00e3o aleijada do aplicativo completo. Voc\u00ea pode escalar o Asana como escalar uma equipe, e h\u00e1 uma boa funcionalidade aqui para ajud\u00e1-lo. Por exemplo, voc\u00ea \u00e9 capaz de atribuir trabalho aos membros da equipe e gerenciar cada fluxo de trabalho. Voc\u00ea tamb\u00e9m \u00e9 capaz de enviar mensagens gerais por espa\u00e7o de trabalho para toda a equipe.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/asana-messages.png\" alt=\"Enviando uma mensagem em Asana.\" width=\"900\" height=\"522\"><figcaption class=\"wp-caption-text\">Enviando uma mensagem em Asana.<\/figcaption><\/figure>\n<p>\u00c9 uma m\u00e3o antiga no gerenciamento de projetos colaborativos, mas o Asana entrega quase sempre. Voc\u00ea ver\u00e1 que uma boa parte de seus clientes e colegas de equipe tamb\u00e9m tem uma conta Asana, o que significa que a montagem dentro do aplicativo acontecer\u00e1 com mais freq\u00fc\u00eancia do que voc\u00ea pode supor.<\/p>\n<h4>46. Basecamp<\/h4>\n<p>O <a href=\"http:\/\/basecamp.com\">Basecamp<\/a> \u00e9 outro grande jogador no gerenciamento de projetos em equipe. \u00c9 um dos antigos guardas, tendo estado por perto tanto tempo quanto o pr\u00f3prio WordPress. O software principal j\u00e1 existe h\u00e1 muito mais tempo, portanto, tem um pedigree e um hist\u00f3rico digno de nota.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/basecamp.png\" alt=\"A p\u00e1gina inicial do Basecamp.\" width=\"900\" height=\"454\"><figcaption class=\"wp-caption-text\">A p\u00e1gina inicial do Basecamp.<\/figcaption><\/figure>\n<p>No papel, nada \u00e9 empolgante no Basecamp em compara\u00e7\u00e3o com a concorr\u00eancia. Sinceramente, muitas das outros aplicativos colaborativas alcan\u00e7aram o que a Basecamp oferece. N\u00e3o \u00e9 a hist\u00f3ria toda, no entanto.<\/p>\n<p>Sim, voc\u00ea pode criar tarefas e listas de tarefas, atribu\u00ed-las aos membros da equipe e trabalhar com tudo em uma base de projeto. As caracter\u00edsticas assassinas do Basecamp, no entanto, s\u00e3o a infraestrutura e o projeto.<\/p>\n<p>H\u00e1 uma abordagem simples para utilizar o Basecamp: criar um projeto, desenvolver sua lista de tarefas ou cronograma e atribuir as tarefas aos colegas de equipe. Cada projeto tem um monte de aspectos autocontidos que o ajudam a passar um projeto para al\u00e9m da linha:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/basecamp-project-screen.png\" alt=\"Os elementos que comp\u00f5em um projeto do Basecamp.\" width=\"900\" height=\"469\"><figcaption class=\"wp-caption-text\">Os elementos que comp\u00f5em um projeto do Basecamp.<\/figcaption><\/figure>\n<p>Como dissemos, n\u00e3o h\u00e1 nada de inovador aqui, mas esse \u00e9 o ponto. Basecamp \u00e9 um sistema de gerenciamento de projetos confi\u00e1vel, sem muitos sinos e apitos. Como tal, voc\u00ea vai continuar voltando a ele porque \u00e9 <a href=\"https:\/\/basecamp.com\/extras\">confi\u00e1vel e extens\u00edvel<\/a> com base em suas necessidades.<\/p>\n<h4>47. Livecycle<\/h4>\n<p>O <a href=\"https:\/\/livecycle.io\/\">Livecycle<\/a> \u00e9 uma ferramenta poderosa projetada especificamente para colabora\u00e7\u00e3o de equipes de desenvolvimento. O Livecycle utiliza o poder dos &#8220;ambientes de visualiza\u00e7\u00e3o&#8221; que se tornaram uma t\u00e9cnica comum usada por equipes de desenvolvimento para criar pr\u00e9-visualiza\u00e7\u00f5es tempor\u00e1rias e compartilh\u00e1veis \u200b\u200bde novas altera\u00e7\u00f5es ou recursos em uma solicita\u00e7\u00e3o de pull de desenvolvedor.<\/p>\n<figure id=\"attachment_150856\" aria-describedby=\"caption-attachment-150856\" style=\"width: 1200px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-150856 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/livecycle.png\" alt=\"Livecycle\" width=\"1200\" height=\"914\"><figcaption id=\"caption-attachment-150856\" class=\"wp-caption-text\">Livecycle<\/figcaption><\/figure>\n<p>Os ambientes de visualiza\u00e7\u00e3o permitem que os desenvolvedores compartilhem uma captura de tela da vers\u00e3o mais recente sem precisar mesclar as altera\u00e7\u00f5es no ambiente de teste ou produ\u00e7\u00e3o.<\/p>\n<p>O Livecycle adiciona uma camada de colabora\u00e7\u00e3o semelhante ao Figma a esses ambientes de visualiza\u00e7\u00e3o para que todos na equipe possam deixar feedback visual no contexto.<\/p>\n<p>Ao gerenciar o feedback da revis\u00e3o dessa maneira, o Livecycle torna o processo de revis\u00e3o mais curto, obt\u00e9m feedback de qualidade superior dos desenvolvedores e permite que as equipes enviem c\u00f3digo para produ\u00e7\u00e3o mais rapidamente. Altamente recomendado para qualquer equipe de desenvolvimento que deseja impactar seus fluxos de trabalho de revis\u00e3o e experi\u00eancia geral de desenvolvedor.<\/p>\n<h3>Executadores de tarefas<\/h3>\n<p>Trabalhar em tarefas pequenas dentro de um projeto de desenvolvimento web apresenta um problema. Elas s\u00e3o necess\u00e1rias para torn\u00e1-lo mais eficiente e produtivo. Voc\u00ea tem que gastar tempo e energia para colocar estas micro-tarefas na linha do lado oposto.<\/p>\n<p>Para ajudar, voc\u00ea precisar\u00e1 de um corredor de tarefas. Aqui est\u00e3o alguns de nossos favoritos.<\/p>\n<h4>48. Grunt<\/h4>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/grunt-js.png\" alt=\"A p\u00e1gina inicial do Grunt.\" width=\"1500\" height=\"501\"><figcaption class=\"wp-caption-text\">A p\u00e1gina inicial do Grunt.<\/figcaption><\/figure>\n<p><a href=\"https:\/\/gruntjs.com\/\">Grunt<\/a> \u00e9 um corredor de tarefas espec\u00edfico para JavaScript que procura automatizar algumas das <a href=\"https:\/\/gruntjs.com\/configuring-tasks\">tarefas mundanas e repetitivas<\/a> que voc\u00ea vai encontrar diariamente. Considere tarefas que voc\u00ea pode tipicamente considerar comuns: cunhagem, <a href=\"https:\/\/kinqsta.com\/pt\/blog\/ativar-compressao-gzip\/\">minifica\u00e7\u00e3o<\/a>, compila\u00e7\u00e3o e muitas outras.<\/p>\n<p>Grunt lida com eles para voc\u00ea atrav\u00e9s de um <a href=\"https:\/\/gruntjs.com\/sample-gruntfile\">arquivo de configura\u00e7\u00e3o baseado no JSON<\/a> (chamado de &#8220;Gruntfile&#8221;). Aqui est\u00e1 um exemplo:<\/p>\n<pre><code>module.exports = function(grunt) {\n  grunt.initConfig({\n    jshint: {\n      files: ['Gruntfile.js', \"src\/**\/*.js', \"test\/**\/*.js'],\n      options: {\n        globals: {\n          jQuery: true\n        }\n      }\n    },\n    watch: {\n      files: ['&lt;%= jshint.files %&gt;'],\n      tasks: ['jshint']\n    }\n  });\n  grunt.loadNpmTasks('grunt-contrib-jshint');\n  grunt.loadNpmTasks('grunt-contrib-watch');\n  grunt.registerTask('default', ['jshint']);\n};<\/code><\/pre>\n<p>Se voc\u00ea frequentemente encontra seus projetos perdendo tempo atrav\u00e9s de tarefas de rotina, o Grunt provavelmente se tornar\u00e1 parte de sua caixa de ferramentas de desenvolvimento web como j\u00e1 \u00e9 para <a href=\"https:\/\/gruntjs.com\/who-uses-grunt\">WordPress, Bootstrap<\/a>, e muitos outros.<\/p>\n<h4>49. Gulp<\/h4>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/gulp.png\" alt=\"O logotipo do Gulp.\" width=\"900\" height=\"408\"><figcaption class=\"wp-caption-text\">O logotipo do Gulp.<\/figcaption><\/figure>\n<p>Quando voc\u00ea compara os corredores de tarefas, muitas vezes \u00e9 um tiroteio entre Gulp e Grunt. <a href=\"http:\/\/gulpjs.com\">Gulp<\/a> \u00e9 um kit de ferramentas baseado em JavaScript para automatizar seu fluxo de trabalho e aumentar sua efici\u00eancia.<\/p>\n<p>Voc\u00ea usar\u00e1 arquivos e &#8220;fluxos&#8221; dedicados para agir sobre seus bens e c\u00f3digos antes de serem escritos em disco. Cada tarefa que voc\u00ea criar \u00e9 uma fun\u00e7\u00e3o &#8220;ass\u00edncrona&#8221;, e voc\u00ea pode defini-la como privada ou p\u00fablica. A diferen\u00e7a \u00e9 uma das permiss\u00f5es: as tarefas privadas n\u00e3o podem ser executadas pelo usu\u00e1rio final e s\u00e3o projetadas para trabalhar com outras fun\u00e7\u00f5es.<\/p>\n<p>Por falar nisso, voc\u00ea pode usar as fun\u00e7\u00f5es de s\u00e9rie() e paralela() para criar tarefas. Isso significa que voc\u00ea pode pegar pequenas tarefas, faz\u00ea-las uma engrenagem em um sistema mais extenso e depois aninh\u00e1-las.<\/p>\n<p>Al\u00e9m disso, voc\u00ea tamb\u00e9m \u00e9 capaz de estender a funcionalidade do Gulp atrav\u00e9s de <a href=\"https:\/\/gulpjs.com\/plugins\/\">plugins criados pela comunidade<\/a>:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/gulp-plugins.png\" alt=\"Uma vitrine de plugins Gulp.\" width=\"900\" height=\"522\"><figcaption class=\"wp-caption-text\">Uma vitrine de plugins Gulp.<\/figcaption><\/figure>\n<p>Pode ser uma generaliza\u00e7\u00e3o, mas tanto o Gulp quanto o Grunt s\u00e3o bons em coisas diferentes. Gulp \u00e9 s\u00f3lido quando se trata de trabalhar com ativos que podem fazer parte de um conjunto mais extenso de instru\u00e7\u00f5es. Por causa disso, voc\u00ea vai querer escolher o executor de tarefas adequado para cada projeto.<\/p>\n<h3>Ferramentas de cont\u00eaineriza\u00e7\u00e3o<\/h3>\n<p>Aqui, n\u00f3s vamos dizer que se voc\u00ea n\u00e3o estiver usando alguma forma de contentoriza\u00e7\u00e3o ou uma ferramenta de m\u00e1quina virtual, seu progresso como desenvolvedor web sofrer\u00e1.<\/p>\n<p>\u00c9 claro que isto n\u00e3o \u00e9 necessariamente verdade para todos, mas h\u00e1 muitos benef\u00edcios em utilizar um ambiente de desenvolvimento baseado em cont\u00eaineres. Aqui est\u00e3o algumas solu\u00e7\u00f5es de escolha.<\/p>\n<h4>50. Docker<\/h4>\n<p>Para muitos, o <a href=\"https:\/\/www.docker.com\/\">Docker<\/a> \u00e9 <em>o <\/em>ambiente de desenvolvimento baseado em cont\u00eaineres de escolha. A plataforma de c\u00f3digo aberto n\u00e3o tem tudo a ver com cont\u00eaineres, mas esta \u00e9 uma raz\u00e3o frequentemente mencionada para utiliz\u00e1-la.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/docker.png\" alt=\"O logotipo da Docker.\" width=\"900\" height=\"406\"><figcaption class=\"wp-caption-text\">O logotipo da Docker.<\/figcaption><\/figure>\n<p>No front-end, \u00e9 um processo simples: clique em um bot\u00e3o e obtenha um ambiente virtual de desenvolvimento de caixas de areia. \u00c9 claro, qualquer coisa que pare\u00e7a simples na parte de cima est\u00e1 bem embaixo. Docker combina uma Interface de Usu\u00e1rio (IU), CLI e API com uma provis\u00e3o de seguran\u00e7a para colocar uma r\u00e1pida implanta\u00e7\u00e3o em suas m\u00e3os.<\/p>\n<p>Para muitos desenvolvedores, o Docker ser\u00e1 fundamental para a cria\u00e7\u00e3o de novos aplicativos. Os desenvolvedores web &#8211; em particular WordPress devs &#8211; t\u00eam uma escolha de ferramentas para o trabalho. Local by Flywheel e DevKinsta s\u00e3o plataformas l\u00edderes.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/devkinsta.png\" alt=\"O Docker alimenta a aplica\u00e7\u00e3o DevKinsta.\" width=\"900\" height=\"596\"><figcaption class=\"wp-caption-text\">O Docker alimenta o aplicativo DevKinsta.<\/figcaption><\/figure>\n<p><strong>Nota: <\/strong>Lan\u00e7amos recentemente DevKinsta &#8211; uma ferramenta de desenvolvimento local para ajudar voc\u00ea a girar novos sites WordPress. Voc\u00ea tamb\u00e9m pode implantar os sites em sua conta Kinsta com um \u00fanico clique.<\/p>\n<p>O Docker tamb\u00e9m se integra com muitas ferramentas &#8211; e v\u00e1rias delas j\u00e1 estar\u00e3o em seu fluxo de trabalho. Apps como GitHub, <a href=\"https:\/\/kinqsta.com\/pt\/blog\/extensoes-vscode-extensions\/\">VS Code<\/a> e outros podem se conectar com o Docker e oferecer uma integra\u00e7\u00e3o suave.<\/p>\n<p>De modo geral, a Docker poderia retomar toda uma s\u00e9rie de artigos sobre o que ela cont\u00e9m. Apesar disso, nada disso pode ser necess\u00e1rio. A probabilidade \u00e9 que voc\u00ea esteja usando o Docker diariamente, e voc\u00ea j\u00e1 sabe como \u00e9 fant\u00e1stico!<\/p>\n<h4>51. LXD<\/h4>\n<p>Em termos simples, <a href=\"https:\/\/linuxcontainers.org\/lxd\/\">LXD<\/a> \u00e9 um gerente de cont\u00eaineres para distros Linux. Ele \u00e9 baseado em imagens e vem com v\u00e1rias imagens pr\u00e9-constru\u00eddas para Linux. O uso de um LXD lhe d\u00e1 paz de esp\u00edrito que voc\u00ea estar\u00e1 desenvolvendo no mesmo sistema operacional padr\u00e3o do usu\u00e1rio final.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/lxd-containers.png\" alt=\"O logotipo LXD.\" width=\"900\" height=\"451\"><figcaption class=\"wp-caption-text\">O logotipo LXD.<\/figcaption><\/figure>\n<p>Foi fundada pelo <a href=\"https:\/\/canonical.com\/\">Ubuntu developers Canonical<\/a>, e, \u00e9 claro, mant\u00e9m uma estrutura de c\u00f3digo aberto. Voc\u00ea \u00e9 capaz de criar ambientes seguros usando containers sem privil\u00e9gios, controlar o uso de recursos usando muitos recursos e at\u00e9 mesmo gerenciar redes.<\/p>\n<p>O LXD tamb\u00e9m \u00e9 escal\u00e1vel, o que significa que voc\u00ea pode executar milhares de n\u00f3s de computa\u00e7\u00e3o ou manter as coisas simples. Para aplicativos baseadas em nuvem, o LXD se <a href=\"https:\/\/opennebula.io\/get-your-hands-on-v-5-8-edge\/\">integra com OpenNebula<\/a> &#8211; este \u00faltimo tem drivers oficiais para gerenciar as inst\u00e2ncias do LXD.<\/p>\n<p>Por padr\u00e3o, muitas ferramentas de contentoriza\u00e7\u00e3o utilizam o Ubuntu como ambiente virtual padr\u00e3o. Mesmo assim, o LXD \u00e9 otimizado para executar a distro. Se n\u00e3o \u00e9 algo que voc\u00ea j\u00e1 tentou antes, vale a pena o tempo para correr atrav\u00e9s de um espa\u00e7o de trabalho de teste. Voc\u00ea pode descobrir que ele se adapta melhor a fluxos de trabalho espec\u00edficos ou a projetos de clientes do que a concorr\u00eancia.<\/p>\n<h3>Ferramentas de otimiza\u00e7\u00e3o de imagem<\/h3>\n<p>Os ativos (ou m\u00eddia, ou qualquer que seja seu nome preferido) s\u00e3o abundantes em toda a web. H\u00e1 culturas online inteiras dedicadas e baseadas em imagens. Como tal, fazer com que seus projetos de desenvolvimento web tenham bom desempenho, apesar do n\u00famero de imagens utilizadas, \u00e9 fundamental.<\/p>\n<p>Aqui est\u00e3o algumas das mais populares e excelentes ferramentas de <a href=\"https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/\">otimiza\u00e7\u00e3o d<\/a><a href=\"https:\/\/kinqsta.com\/pt\/blog\/otimizar-imagens-para-web\/\">e imagem<\/a> dispon\u00edveis.<\/p>\n<h4>52. ShortPixel<\/h4>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/shortpixel.png\" alt=\"O site ShortPixel.\" width=\"900\" height=\"611\"><figcaption class=\"wp-caption-text\">O site ShortPixel.<\/figcaption><\/figure>\n<p>H\u00e1 muitos plugins de otimiza\u00e7\u00e3o de imagem dispon\u00edveis, mas o <a href=\"http:\/\/shortpixel.com\">ShortPixel<\/a> tem um algoritmo subjetivamente robusto. Ela \u00e9 capaz de reduzir o tamanho dos arquivos de imagem sem afetar a qualidade. Se estivermos sendo picuinhas, diremos que como a configura\u00e7\u00e3o padr\u00e3o \u00e9 a maior compress\u00e3o dispon\u00edvel, n\u00e3o h\u00e1 alternativa se sua imagem n\u00e3o for suficientemente comprimida. No entanto, isto n\u00e3o \u00e9 uma cr\u00edtica importante.<\/p>\n<p>ShortPixel tem toneladas de funcionalidade sob o cap\u00f4. H\u00e1 tr\u00eas n\u00edveis de compress\u00e3o, um <a href=\"https:\/\/shortpixel.com\/online-pdf-compressor\">\u00f3timo otimizador de PDF<\/a> e at\u00e9 mesmo um compressor GIF. Este \u00faltimo \u00e9 algo que voc\u00ea n\u00e3o encontra em muitas outras ferramentas, portanto \u00e9 um acr\u00e9scimo bem-vindo \u00e0 linha de produtos.<\/p>\n<p>Toda a interface \u00e9 acess\u00edvel, tamb\u00e9m: Voc\u00ea arrasta e solta imagens no uploader e espera que o ShortPixel fa\u00e7a sua m\u00e1gica. Uma vez processadas suas imagens, voc\u00ea pode baix\u00e1-las em lote ou selecionar imagens individuais para download:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/shortpixel-downloader.png\" alt=\"Download de imagens do ShortPixel.\" width=\"900\" height=\"522\"><figcaption class=\"wp-caption-text\">Download de imagens do ShortPixel.<\/figcaption><\/figure>\n<p>As <a href=\"https:\/\/shortpixel.com\/api-tools\">ferramentas ShortPixel API<\/a> tamb\u00e9m s\u00e3o robustas. Voc\u00ea encontrar\u00e1 APIs separadas para reduzir imagens online e offline, bibliotecas de clientes PHP e .NET abrangentes, um mecanismo adaptativo baseado em JavaScript, e muito mais.<\/p>\n<p>Sugerimos que o ShortPixel \u00e9 uma ferramenta para desenvolvedores, pois \u00e9 \u00f3timo para conectar seu site ou aplicativo. Dir\u00edamos tamb\u00e9m que ele ultrapassaria seu v\u00edcio em TinyPNG em um piscar de olhos, especialmente se voc\u00ea quisesse us\u00e1-lo como parte de um fluxo de trabalho maior.<\/p>\n<h4>53. TinyPNG<\/h4>\n<p>Chegou a hora da ferramenta de otimiza\u00e7\u00e3o de imagem favorita de todos &#8211; <a href=\"http:\/\/tinypng.com\">TinyPNG<\/a>. Voc\u00ea tamb\u00e9m pode incluir o <a href=\"http:\/\/tinyjpg.com\">TinyJPG<\/a> nesta entrada, embora ambas as ferramentas trabalhem com os mesmos formatos de imagem.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/tinypng.png\" alt=\"O site TinyPNG.\" width=\"900\" height=\"522\"><figcaption class=\"wp-caption-text\">O site TinyPNG.<\/figcaption><\/figure>\n<p>Voc\u00ea ver\u00e1 que o TinyPNG n\u00e3o mudou muito ao longo dos anos. \u00c9 ainda uma ferramenta simples de arrastar e soltar para otimizar suas imagens. N\u00e3o h\u00e1 sinos ou apitos, e n\u00e3o h\u00e1 um conjunto extenso de formatos de arquivo. Ainda assim, o que <em>o<\/em> TinyPNG oferece \u00e9 uma usabilidade suprema e um monte de integra\u00e7\u00f5es com outras ferramentas.<\/p>\n<p>Por exemplo, h\u00e1 um <a href=\"https:\/\/tinypng.com\/photoshop\">plugin Photoshop<\/a> e &#8211; para plugins mais finos &#8211; um <a href=\"https:\/\/tinypng.com\/developers\">API funcional para desenvolvedores<\/a>. At\u00e9 mesmo usu\u00e1rios Python podem entrar em a\u00e7\u00e3o, pois a API tamb\u00e9m suporta esta linguagem. Houve <a href=\"https:\/\/tinypng.com\/third-party\">v\u00e1rios plugins<\/a> criados usando a API para muitas ferramentas de terceiros tamb\u00e9m.<\/p>\n<p>N\u00e3o estamos sugerindo que o TinyPNG tenha o monop\u00f3lio do mercado de otimiza\u00e7\u00e3o de imagem, mas muitas vezes \u00e9 a primeira escolha para muitos usu\u00e1rios. Pegar uma imagem e deix\u00e1-la cair no carregador leva segundos, e quando voc\u00ea obt\u00e9m uma representa\u00e7\u00e3o perfeita de 99,9% de sua imagem de volta, \u00e9 f\u00e1cil de confiar.<\/p>\n<h3>Ferramentas de teste do site<\/h3>\n<p>Falamos anteriormente sobre testar seu API e o c\u00f3digo central do site, embora isto falhe o desempenho do seu site. Aqui est\u00e3o algumas ferramentas que adoramos e que tamb\u00e9m poderiam ajud\u00e1-lo a analisar o desempenho de seus sites.<\/p>\n<h4>54. Responsively<\/h4>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/responsively.png\" alt=\"O aplicativo Responsively app.\" width=\"900\" height=\"427\"><figcaption class=\"wp-caption-text\">O aplicativo Responsively app.<\/figcaption><\/figure>\n<p>Se voc\u00ea j\u00e1 foi sobrecarregado pelo n\u00famero de consultas \u00e0 m\u00eddia que precisa realizar e aperfei\u00e7oar em seu aplicativo, <a href=\"https:\/\/responsively.app\">confira Responsively<\/a>. \u00c9 uma ferramenta open source front-end para ajud\u00e1-lo a desenvolver sites de acordo com os v\u00e1rios viewports de seus dispositivos escolhidos.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/responsively-viewports.png\" alt=\"Visualizando diferentes dispositivos em Responsively.\" width=\"900\" height=\"563\"><figcaption class=\"wp-caption-text\">Visualizando diferentes dispositivos em Responsively.<\/figcaption><\/figure>\n<p>O \u00f3timo disto \u00e9 como voc\u00ea pode comparar os layouts lado a lado. Isso lhe d\u00e1 uma s\u00f3lida chance de aumentar sua consist\u00eancia entre os dispositivos. Cada dispositivo \u00e9 preciso, e h\u00e1 muitos para escolher, o que \u00e9 excelente se seu site tiver como alvo dispositivos espec\u00edficos.<\/p>\n<p>Voc\u00ea tamb\u00e9m pode adicionar as extens\u00f5es do navegador dedicado para <a href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/responsively-helper\">Mozilla Firefox<\/a>, <a href=\"https:\/\/microsoftedge.microsoft.com\/addons\/detail\/responsively-helper\/ooiejjgflcgkbbehheengalibfehaojn\">Microsoft Edge<\/a> e <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/responsively-helper\/jhphiidjkooiaollfiknkokgodbaddcj\">Google Chrome<\/a> para enviar p\u00e1ginas para o navegador Responsively. A partir daqui, voc\u00ea pode abrir as ferramentas de desenvolvimento embutidas e come\u00e7ar a trabalhar.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/responsively-inspector.png\" alt=\"O Inspetor Responsively.\" width=\"900\" height=\"563\"><figcaption class=\"wp-caption-text\">O Inspetor Responsively.<\/figcaption><\/figure>\n<p>H\u00e1 toneladas de outras caracter\u00edsticas, tais como funcionalidade de captura de tela, suporte de carregamento (hot-loading), e mais para ajud\u00e1-lo a se desenvolver. \u00c9 dif\u00edcil argumentar com o slogan que Responsively \u00e9 o &#8220;navegador do desenvolvedor web&#8221;. Ela pode acabar se tornando um componente essencial de seu fluxo de trabalho.<\/p>\n<h4>55. Google Lighthouse<\/h4>\n<p>Para muitos, a <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\">PageSpeed Insights<\/a> do Google \u00e9 uma ferramenta valiosa para descobrir como um site funciona e onde voc\u00ea pode aumentar a velocidade de carregamento.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/pagespeed-insights.png\" alt=\"P\u00e1gina do GoogleSpeed Insights.\" width=\"900\" height=\"523\"><figcaption class=\"wp-caption-text\">P\u00e1gina do GoogleSpeed Insights.<\/figcaption><\/figure>\n<p>Dito isto, alguns dos softwares debaixo do cap\u00f4 s\u00e3o mais interessantes de se examinar em profundidade. Ele tamb\u00e9m poderia ser mais adequado \u00e0s suas necessidades. O <a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\/\">Google Lighthouse<\/a> pode ser executado contra qualquer p\u00e1gina web, e fornece auditorias e relat\u00f3rios de desempenho de p\u00e1ginas, SEO, aplicativos Web Progressivas (PWA), etc.<\/p>\n<p>As principais formas de executar o Farol Google s\u00e3o a partir da linha de comando, usando as DevTools do Chrome, ou como um m\u00f3dulo de Nodo. Se voc\u00ea usar a interface PageSpeed Insights, o Lighthouse gera algumas das pontua\u00e7\u00f5es e fornece mais informa\u00e7\u00f5es.<\/p>\n<p>Vale notar que na superf\u00edcie, o Google Lighthouse e PageSpeed Insights parecem semelhantes. Mas o PageSpeed Insights utiliza dados baseados em laborat\u00f3rio combinados com dados de usu\u00e1rios do mundo real. A an\u00e1lise do Lighthouse&#8217;suse desconsidera os dados dos usu\u00e1rios e mede mais elementos do seu site.<\/p>\n<p>Em nossa opini\u00e3o, vale a pena executar tanto PageSpeed Insights quanto Lighthouse, especialmente se o objetivo do seu cliente \u00e9 chegar ao topo das P\u00e1ginas de Resultados de Motores de Busca (SERPs). Em qualquer caso, \u00e9 uma ferramenta s\u00f3lida a ter \u00e0 m\u00e3o, e poderia at\u00e9 suplantar PageSpeed Insights como sua ferramenta de desempenho de escolha.<\/p>\n<h4>56. Cypress<\/h4>\n<p>Os testes de ponta a ponta n\u00e3o s\u00e3o uma experi\u00eancia feliz para muitos desenvolvedores. O <a href=\"https:\/\/www.cypress.io\/\">Cypress<\/a> \u00e9 uma solu\u00e7\u00e3o simples que vai contra a tend\u00eancia de testes de ponta a ponta e produz algo excepcional.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/cypress.png\" alt=\"A p\u00e1gina inicial da Cypress.\" width=\"900\" height=\"521\"><figcaption class=\"wp-caption-text\">A p\u00e1gina inicial da Cypress.<\/figcaption><\/figure>\n<p>Enquanto a maioria das ferramentas de teste de ponta a ponta s\u00e3o baseadas em <a href=\"https:\/\/www.selenium.dev\/\">Selenium<\/a>, a Cypress vai em uma dire\u00e7\u00e3o diferente. Isso significa que os problemas que os usu\u00e1rios encontram com testadores baseados em Sel\u00eanio n\u00e3o est\u00e3o presentes aqui. Na verdade, os desenvolvedores querem fazer da instala\u00e7\u00e3o, da escrita e da execu\u00e7\u00e3o de testes uma brisa.<\/p>\n<p>Para isso, eles constru\u00edram a arquitetura do zero e se concentraram em testes de ponta a ponta, excluindo outras formas. Para ajudar no desempenho, o Cypress roda no mesmo loop de execu\u00e7\u00e3o do seu programa, em vez de executar comandos remotos atrav\u00e9s da rede.<\/p>\n<p>Como o c\u00f3digo de teste \u00e9 executado no navegador, n\u00e3o h\u00e1 nenhum condutor ou liga\u00e7\u00e3o de idioma a considerar. Mesmo assim, voc\u00ea \u00e9 capaz de compilar at\u00e9 JavaScript antes de executar os testes.<\/p>\n<p>Se voc\u00ea \u00e9 um engenheiro de Garantia de Qualidade (QA) ou um desenvolvedor que deseja que seus testes de ponta a ponta tenham acesso nativo ao seu trabalho, a Cypress deve comandar sua aten\u00e7\u00e3o. A melhor parte \u00e9 que tamb\u00e9m h\u00e1 um <a href=\"https:\/\/www.cypress.io\/pricing\">n\u00edvel gratuito com todas as funcionalidades<\/a>!<\/p>\n<h4>57. Stack Overflow e motores de busca<\/h4>\n<p>Por um momento, permita-nos estender os limites do que \u00e9 considerado uma ferramenta de desenvolvimento web. O <a href=\"http:\/\/stackoverflow.com\">Stack Overflow<\/a> \u00e9 bem conhecido por qualquer pessoa que tenha at\u00e9 mesmo um conhecimento passageiro do desenvolvimento da web:<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/stack-overflow.png\" alt=\"O site Stack Overflow.\" width=\"1500\" height=\"748\"><figcaption class=\"wp-caption-text\">O site Stack Overflow.<\/figcaption><\/figure>\n<p>\u00c9 um site de perguntas e respostas focado em programa\u00e7\u00e3o, e faz parte da rede <a href=\"http:\/\/stackexchange.com\">Stack Exchange<\/a> que cobre todos os tipos de outros assuntos:<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/stack-exchange.png\" alt=\"Um dos muitos sites de nicho na rede Stack Exchange.\" width=\"1500\" height=\"870\"><figcaption class=\"wp-caption-text\">Um dos muitos sites de nicho na rede Stack Exchange.<\/figcaption><\/figure>\n<p>\u00c9 conhecido como um recurso para milhares de desenvolvedores, e apesar de alguma <a href=\"https:\/\/medium.com\/@Aprilw\/suffering-on-stack-overflow-c46414a34a52\">controv\u00e9rsia sobre sua comunidade<\/a>, o tr\u00e1fego ainda \u00e9 substancial. Ousar\u00edamos dizer que Stack, junto com seu mecanismo de busca de escolha, representa uma ferramenta flex\u00edvel de desenvolvimento web para aprender e melhorar suas habilidades.<\/p>\n<p>Por exemplo, \u00e9 prov\u00e1vel que voc\u00ea se dirija para o Stack Overflow quando encontrar um bloqueio de desenvolvimento relacionado ao c\u00f3digo. Da mesma forma, quando surge um erro que voc\u00ea n\u00e3o sabe como resolver, col\u00e1-lo em um mecanismo de busca \u00e9 a maneira mais r\u00e1pida de encontrar a resposta que voc\u00ea precisa.<\/p>\n<p>Considerando que <a href=\"https:\/\/insights.stackoverflow.com\/survey\/2020#technology-what-do-you-do-when-you-get-stuck\">90% dos usu\u00e1rios pesquisados<\/a> v\u00e3o ao Stack Overflow para resolver problemas, \u00e9 prov\u00e1vel que todos usem a ferramenta. Entretanto, para iniciantes &#8211; ou mesmo se voc\u00ea n\u00e3o conseguir articular seu problema &#8211; os mecanismos de busca ser\u00e3o, sem d\u00favida, um pouco mais amig\u00e1veis.<\/p>\n<h3>Refer\u00eancias de desenvolvimento web<\/h3>\n<p>Se voc\u00ea \u00e9 um desenvolvedor que subscreve o ethos &#8220;RTFM&#8221;, n\u00e3o precisar\u00e1 de nenhum convencimento sobre as poucas entradas seguintes. Em contraste, se voc\u00ea gosta de entrar em um problema e resolv\u00ea-lo, saiba que j\u00e1 houve in\u00fameros desenvolvedores antes de voc\u00ea que provavelmente encontraram uma resposta.<\/p>\n<p>Diante disso, observe as poucas ferramentas de desenvolvimento web a seguir, todas baseadas em materiais de refer\u00eancia web.<\/p>\n<h4>58. MDN Web Docs<\/h4>\n<p>Nos primeiros tempos da rede, havia um <a href=\"https:\/\/gawker.com\/187550\/exclusive-leak-editor-says-lycos-will-shutter-webmonkey\">site chamado Webmonkey<\/a> dirigido pela Lycos e que tinha como objetivo ensinar o desenvolvimento e a programa\u00e7\u00e3o da web a novos usu\u00e1rios. O esp\u00edrito desse site vive no <a href=\"https:\/\/developer.mozilla.org\/en-US\/\">MDN Web Docs<\/a> da Mozilla. O Webmoney fechou em 2004, e o MDN Web Docs chegou em 2005, de modo que h\u00e1 um encaixe natural entre os dois.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/mdn-web-docs.png\" alt=\"A p\u00e1gina inicial da MDN Web Docs.\" width=\"900\" height=\"523\"><figcaption class=\"wp-caption-text\">A p\u00e1gina inicial da MDN Web Docs.<\/figcaption><\/figure>\n<p>\u00c9 uma cole\u00e7\u00e3o de recursos para ajudar a ensinar programa\u00e7\u00e3o para a web em alguns casos, e produtos espec\u00edficos da Mozilla em outros. O conte\u00fado \u00e9 dividido em duas grandes categorias: tecnologias e guias de refer\u00eancia. S\u00e3o mostrados v\u00e1rios tutoriais baseados em sua capacidade e experi\u00eancia existente, um guia de refer\u00eancia dedicado, e alguns recursos adicionais para o primeiro.<\/p>\n<p>Os guias s\u00e3o todos relacionados a nichos e ind\u00fastrias espec\u00edficas dentro da ind\u00fastria de desenvolvimento. Por exemplo, a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Reference\">refer\u00eancia Web Development<\/a> funciona como uma p\u00e1gina &#8220;cornerstone&#8221; para guias adicionais de HTML, CSS e JavaScript.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/mdn-javascript.png\" alt=\"MDN Web Docs p\u00e1gina JavaScript.\" width=\"900\" height=\"386\"><figcaption class=\"wp-caption-text\">MDN Web Docs p\u00e1gina JavaScript.<\/figcaption><\/figure>\n<p>H\u00e1 tamb\u00e9m uma ampla an\u00e1lise de v\u00e1rias ind\u00fastrias, como o desenvolvimento de jogos e o que \u00e9 necess\u00e1rio para come\u00e7ar no campo:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/mdn-game-development.png\" alt=\"Guia do MDN Web Doc sobre desenvolvimento de jogos.\" width=\"900\" height=\"652\"><figcaption class=\"wp-caption-text\">Guia do MDN Web Doc sobre desenvolvimento de jogos.<\/figcaption><\/figure>\n<p>MDN Web Docs \u00e9 leitura essencial para um desenvolvedor web iniciante, e tamb\u00e9m oferece valor mais do que suficiente para um especialista. Se existe algum site que merece um bookmark do navegador, \u00e9 este!<\/p>\n<h4>59. DevDocs \u2014 API Documentation Browser<\/h4>\n<p>No passado, voc\u00ea guardava todos os manuais dos produtos que comprava em uma gaveta ou arm\u00e1rio empoeirado. Como a vida se tornou mais digital, esses manuais em papel deram lugar a downloads em PDF a partir do site de cada fabricante.<\/p>\n<p>Atrav\u00e9s disso, agora temos sites que coletam as vers\u00f5es digitais dos manuais em bibliotecas de curadoria. Ele permite encontrar o que voc\u00ea precisa a partir de um reposit\u00f3rio. Como tal, \u00e9 l\u00f3gico que tamb\u00e9m existiria um para t\u00f3picos de desenvolvimento web.<\/p>\n<p>Em resumo, <a href=\"http:\/\/devdocs.io\">DevDocs<\/a> \u00e9 uma biblioteca de documenta\u00e7\u00e3o para APIs, e \u00e9 algo que pensamos que ser\u00e1 valioso para quase todos os desenvolvedores:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/devdocs.png\" alt=\"A p\u00e1gina inicial do DevDocs.\" width=\"900\" height=\"524\"><figcaption class=\"wp-caption-text\">A p\u00e1gina inicial do DevDocs.<\/figcaption><\/figure>\n<p>Antes de olhar atrav\u00e9s da biblioteca, voc\u00ea vai querer habilitar sua documenta\u00e7\u00e3o API desejada. Voc\u00ea o faz a partir da tela <strong>Prefer\u00eancias:<\/strong><\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/devdocs-preferences.png\" alt=\"A tela de Prefer\u00eancias DevDocs.\" width=\"900\" height=\"522\"><figcaption class=\"wp-caption-text\">A tela de Prefer\u00eancias DevDocs.<\/figcaption><\/figure>\n<p>Uma vez feito, voc\u00ea poder\u00e1 acessar a documenta\u00e7\u00e3o relevante a partir de um menu em \u00e1rvore dedicado:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/devdocs-wordpress.png\" alt=\"A tela do WordPress API.\" width=\"900\" height=\"523\"><figcaption class=\"wp-caption-text\">A tela do WordPress API.<\/figcaption><\/figure>\n<p>\u00c9 uma solu\u00e7\u00e3o simples para um problema ineficiente, pois voc\u00ea tem v\u00e1rias refer\u00eancias API em um s\u00f3 lugar. DevDocs \u00e9 outro site que merece um bookmark, e \u00e9 uma pena que n\u00e3o haja um aplicativo desktop dispon\u00edvel para uma refer\u00eancia ainda mais r\u00e1pida.<\/p>\n<h4>60. CSS-Tricks<\/h4>\n<p>Chris Coyier \u00e9 um nome que muitos desenvolvedores web conhecer\u00e3o. Apostamos que voc\u00ea j\u00e1 conhece o site que ele fundou &#8211; <a href=\"https:\/\/css-tricks.com\/\">CSS-Tricks<\/a>. Como o nome sugere, \u00e9 um site dedicado \u00e0 codifica\u00e7\u00e3o de front-end, especificamente CSS, e como ficar melhor.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/css-tricks.png\" alt=\"A p\u00e1gina inicial do CSS-Tricks.\" width=\"900\" height=\"270\"><figcaption class=\"wp-caption-text\">A p\u00e1gina inicial do CSS-Tricks.<\/figcaption><\/figure>\n<p>Como <a href=\"https:\/\/css-tricks.com\/about\/\">observa a p\u00e1gina Sobre<\/a>, durante os primeiros anos, o CSS foi o t\u00f3pico predominante. Desde ent\u00e3o, no entanto, HTML, JavaScript, WordPress e muito mais se tornaram igualmente importantes e freq\u00fcentemente discutidos. O resultado \u00e9 um site focado no desenvolvimento de front-end, com uma grande quantidade de artigos, v\u00eddeos e guias para inspir\u00e1-lo.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/css-tricks-articles.png\" alt=\"O blog para CSS-Tricks.\" width=\"900\" height=\"523\"><figcaption class=\"wp-caption-text\">O blog para CSS-Tricks.<\/figcaption><\/figure>\n<p>Um elemento simples mas valioso \u00e9 o <a href=\"https:\/\/css-tricks.com\/almanac\/\">CSS Almanac<\/a>, que delineia os seletores e as propriedades dentro do CSS. \u00c9 uma grande fonte de refer\u00eancia se voc\u00ea precisar se atualizar com certos aspectos da linguagem.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/css-tricks-almanac.png\" alt=\"O CSS-Tricks Almanac.\" width=\"900\" height=\"462\"><figcaption class=\"wp-caption-text\">O CSS-Tricks Almanac.<\/figcaption><\/figure>\n<p>Embora existam aspectos de refer\u00eancia do CSS-Tricks, ele n\u00e3o \u00e9 um recurso de refer\u00eancia <em>por si s\u00f3<\/em>. Mesmo assim, deve ser um assombro regular para voc\u00ea, seja atrav\u00e9s de um feed RSS ou outra solu\u00e7\u00e3o. O conte\u00fado \u00e9 de alta qualidade e pode desafi\u00e1-lo de maneiras que voc\u00ea n\u00e3o havia pensado antes. No m\u00ednimo, <a href=\"https:\/\/css-tricks.com\/newsletter\/246-communication-is-key\/\">assine o boletim informativo<\/a> e espere que o CSS-Tricks chegue \u00e0 sua caixa de entrada.<\/p>\n<h4>61. DEV Community<\/h4>\n<p>Imagine que voc\u00ea poderia pegar as partes excelentes das m\u00eddias sociais, desenvolvimento web e Stack Overflow, e depois criar um site que as funda. A <a href=\"http:\/\/dev.to\">Comunidade DEV<\/a> poderia ser o resultado.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/dev-community.png\" alt=\"A p\u00e1gina inicial da Comunidade DEV.\" width=\"900\" height=\"489\"><figcaption class=\"wp-caption-text\">A p\u00e1gina inicial da Comunidade DEV.<\/figcaption><\/figure>\n<p>\u00c9 uma plataforma de blogging, mas tamb\u00e9m uma maneira de encontrar as respostas para as perguntas sobre desenvolvimento. Voc\u00ea seleciona tags e pessoas para seguir, e seu newsfeed se torna uma linha do tempo automatizada e curada de artigos e insights:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/dev-community-timeline.png\" alt=\"A linha do tempo da comunidade DEV para a tag JavaScript.\" width=\"900\" height=\"473\"><figcaption class=\"wp-caption-text\">A linha do tempo da comunidade DEV para a tag JavaScript.<\/figcaption><\/figure>\n<p>\u00c9 um ponto justo para sugerir que esta \u00e9 uma informa\u00e7\u00e3o que voc\u00ea pode encontrar em qualquer lugar &#8211; se voc\u00ea estiver disposto a encontr\u00e1-la. O ponto positivo da Comunidade DEV \u00e9 que ela est\u00e1 aqui, e \u00e9 uma colet\u00e2nea dirigida de assuntos de desenvolvimento. Pense nisso como uma trilha de conven\u00e7\u00e3o de desenvolvedores, em vez de ouvir demais e se meter em uma conversa relacionada na parada do \u00f4nibus.<\/p>\n<p>\u00c9 outro site que se sair\u00e1 bem dentro do seu feed RSS, ou como uma digest\u00e3o em sua caixa de entrada. Como tal, \u00e9 tamb\u00e9m um recurso &#8220;adormecido&#8221; no sentido de que voc\u00ea se dirigir\u00e1 aqui muitas vezes sem perceber.<\/p>\n<h4>62. Can I use\u2026<\/h4>\n<p>Pode-se argumentar que <a href=\"http:\/\/ask.com\">Jeeves iniciou a tend\u00eancia<\/a> de fazer perguntas na Internet para encontrar informa\u00e7\u00f5es. Ele foi substitu\u00eddo rapidamente por v\u00e1rios algoritmos de busca, embora a busca baseada em perguntas ainda seja uma maneira confi\u00e1vel de encontrar o que voc\u00ea precisa.<\/p>\n<p><a href=\"https:\/\/caniuse.com\/\"><em>Can I use.. <\/em><\/a>\u00e9 a resposta do <a href=\"https:\/\/kinqsta.com\/pt\/blog\/desenvolvedor-frontend\/\">desenvolvedor do front-end<\/a> a &#8220;<em>Existe um Ask Jeeves para CSS? <\/em>\u201d<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/can-i-use.png\" alt=\"A p\u00e1gina inicial de Can I use\u2026\" width=\"900\" height=\"469\"><figcaption class=\"wp-caption-text\">A p\u00e1gina inicial de Can I use\u2026<\/figcaption><\/figure>\n<p>A premissa \u00e9 simples: voc\u00ea digita o seletor CSS ou propriedade no campo de busca, e o banco de dados retorna se voc\u00ea pode utiliz\u00e1-lo para criar sites. Voc\u00ea tamb\u00e9m n\u00e3o est\u00e1 restrito ao CSS. JavaScript e HTML tamb\u00e9m s\u00e3o suportados:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/can-i-use-html.png\" alt=\"Procurando por um elemento HTML em Can I use\u2026\" width=\"900\" height=\"489\"><figcaption class=\"wp-caption-text\">Procurando por um elemento HTML em Can I use\u2026<\/figcaption><\/figure>\n<p>\u00c9 um banco de dados de linguagens front-end, por isso n\u00e3o vai procurar retornar resultados para PHP, Python, ou outras linguagens do lado do servidor. Mesmo assim, <em>Can I use&#8230; <\/em>\u00e9 uma ferramenta imensa e valiosa que o ajudar\u00e1 quando se trata de acessibilidade e design para m\u00faltiplos dispositivos.<\/p>\n<p>\u00c9 uma simples proposta para puxar um elemento espec\u00edfico e ver rapidamente se seu navegador de destino o suporta:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/can-i-use-element-detail.png\" alt=\"A tabela de suporte do navegador em Can I use\u2026\" width=\"900\" height=\"337\"><figcaption class=\"wp-caption-text\">A tabela de suporte do navegador em Can I use&#8230;<\/figcaption><\/figure>\n<p>Se voc\u00ea olhar mais de perto, voc\u00ea tamb\u00e9m pode encontrar estat\u00edsticas como a data de libera\u00e7\u00e3o do elemento e uma porcentagem de uso:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/05\/can-i-use-element-information.png\" alt=\"Informa\u00e7\u00f5es para um elemento espec\u00edfico em Can I use\u2026\" width=\"900\" height=\"388\"><figcaption class=\"wp-caption-text\">Informa\u00e7\u00f5es para um elemento espec\u00edfico em Can I use\u2026<\/figcaption><\/figure>\n<p>De modo geral, <em>Can I use&#8230; <\/em>talvez n\u00e3o tenha uso regular. Em certas etapas de um projeto, por\u00e9m, ele estar\u00e1 aberto quase o tempo todo. Uma vez que voc\u00ea tenha descoberto o que seus navegadores alvo v\u00e3o suportar, <em>Can I use&#8230;<\/em><em>\u00a0<\/em>embaralha de volta para seus favoritos e espera quando for necess\u00e1rio. \u00c9 um servi\u00e7o \u00fatil que pode ser um &#8220;portador de \u00e1gua&#8221; quando se trata do seu c\u00f3digo front-end.<\/p>\n\n<h2>Resumo<\/h2>\n<p>O tempo e o dinheiro s\u00e3o curtos, e h\u00e1 uma certa l\u00f3gica para optar pelas mesmas ferramentas antigas de desenvolvimento web que voc\u00ea sempre usou. Entretanto, fazer uma escolha criteriosa sobre o que voc\u00ea precisa para um projeto lhe poupar\u00e1 tempo, custo e produtividade.<\/p>\n<p>Neste artigo, abordamos 62 ferramentas incr\u00edveis de desenvolvimento web que voc\u00ea pode usar para dar a voc\u00ea e sua equipe uma etapa acima. Talvez voc\u00ea j\u00e1 esteja fazendo isso. Se as v\u00e1rias pesquisas estiverem corretas, mais desenvolvedores do que nunca est\u00e3o se voltando para GitHub, TypeScript, v\u00e1rias pilhas de servi\u00e7os web, e uma das muitas estruturas de JavaScript para fazer com que os projetos sejam aprovados.<\/p>\n<p>N\u00e3o importa quais ferramentas de desenvolvimento web voc\u00ea escolha usar, os <a href=\"https:\/\/kinqsta.com\/pt\/precos\/?plan=visits-business1\">clientes Kinsta<\/a> t\u00eam acesso a ainda mais atrav\u00e9s da plataforma MyKinsta. Isto inclui um impulso r\u00e1pido e f\u00e1cil para sua otimiza\u00e7\u00e3o geral, usando o <a href=\"https:\/\/kinqsta.com\/pt\/docs\/hospedagem-de-wordpress\/cdn-wordpress\/cdn-kinsta\/#kinstas-cdn#code-minification-1\">recurso de minifica\u00e7\u00e3o de c\u00f3digo<\/a> que est\u00e1 embutido diretamente no <a href=\"https:\/\/kinqsta.com\/pt\/mykinsta\/\">painel MyKinsta<\/a>, permitindo aos clientes ativar a minifica\u00e7\u00e3o autom\u00e1tica de CSS e JavaScript com um simples clique.<\/p>\n<p><em>Voc\u00ea tem uma ferramenta de desenvolvimento web para recomendar que os desenvolvedores usem em um futuro pr\u00f3ximo? Informe-nos suas id\u00e9ias na se\u00e7\u00e3o de coment\u00e1rios abaixo!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>H\u00e1 algo rom\u00e2ntico e emocionante em abrir TextEdit ou Notepad e digitar &#8220;&lt;HTML&gt;&#8221; para dar in\u00edcio a um novo projeto. \u00c9 quantos de n\u00f3s come\u00e7aram nossa &#8230;<\/p>\n","protected":false},"author":117,"featured_media":43054,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[491,44],"topic":[1018,952],"class_list":["post-43050","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-web-development-tools","tag-webdev","topic-ferramentas-desenvolvimento-web","topic-ferramentas-empresariais"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>62 \u00d3timas Ferramentas de Desenvolvimento Web<\/title>\n<meta name=\"description\" content=\"Explore 62 ferramentas incr\u00edveis de desenvolvimento web que voc\u00ea pode aproveitar para aumentar suas habilidades e produtividade na web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"62 \u00d3timas Ferramentas de Desenvolvimento Web\" \/>\n<meta property=\"og:description\" content=\"Explore 62 ferramentas incr\u00edveis de desenvolvimento web que voc\u00ea pode aproveitar para aumentar suas habilidades e produtividade na web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-31T06:09:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-11T09:04:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/05\/web-development-tools.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1461\" \/>\n\t<meta property=\"og:image:height\" content=\"731\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Explore 62 ferramentas incr\u00edveis de desenvolvimento web que voc\u00ea pode aproveitar para aumentar suas habilidades e produtividade na web.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/05\/web-development-tools.png\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"93 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"62 \u00d3timas Ferramentas de Desenvolvimento Web\",\"datePublished\":\"2021-05-31T06:09:51+00:00\",\"dateModified\":\"2025-02-11T09:04:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/\"},\"wordCount\":16724,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/05\/web-development-tools.png\",\"keywords\":[\"web development tools\",\"webdev\"],\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/\",\"url\":\"https:\/\/kinqsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/\",\"name\":\"62 \u00d3timas Ferramentas de Desenvolvimento Web\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/05\/web-development-tools.png\",\"datePublished\":\"2021-05-31T06:09:51+00:00\",\"dateModified\":\"2025-02-11T09:04:55+00:00\",\"description\":\"Explore 62 ferramentas incr\u00edveis de desenvolvimento web que voc\u00ea pode aproveitar para aumentar suas habilidades e produtividade na web.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/05\/web-development-tools.png\",\"contentUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/05\/web-development-tools.png\",\"width\":1461,\"height\":731,\"caption\":\"60 Fant\u00e1sticas Ferramentas de Desenvolvimento Web a Utilizar em 2021\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ferramentas de Desenvolvimento Web\",\"item\":\"https:\/\/kinqsta.com\/pt\/topicos\/ferramentas-desenvolvimento-web\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"62 \u00d3timas Ferramentas de Desenvolvimento Web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#website\",\"url\":\"https:\/\/kinqsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.\",\"sameAs\":[\"https:\/\/salmanravoof.com\",\"https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/\",\"https:\/\/x.com\/salmanravoof\"],\"url\":\"https:\/\/kinqsta.com\/pt\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"62 \u00d3timas Ferramentas de Desenvolvimento Web","description":"Explore 62 ferramentas incr\u00edveis de desenvolvimento web que voc\u00ea pode aproveitar para aumentar suas habilidades e produtividade na web.","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:\/\/kinqsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/","og_locale":"pt_PT","og_type":"article","og_title":"62 \u00d3timas Ferramentas de Desenvolvimento Web","og_description":"Explore 62 ferramentas incr\u00edveis de desenvolvimento web que voc\u00ea pode aproveitar para aumentar suas habilidades e produtividade na web.","og_url":"https:\/\/kinqsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2021-05-31T06:09:51+00:00","article_modified_time":"2025-02-11T09:04:55+00:00","og_image":[{"width":1461,"height":731,"url":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/05\/web-development-tools.png","type":"image\/png"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"Explore 62 ferramentas incr\u00edveis de desenvolvimento web que voc\u00ea pode aproveitar para aumentar suas habilidades e produtividade na web.","twitter_image":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/05\/web-development-tools.png","twitter_creator":"@salmanravoof","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Salman Ravoof","Tempo estimado de leitura":"93 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"62 \u00d3timas Ferramentas de Desenvolvimento Web","datePublished":"2021-05-31T06:09:51+00:00","dateModified":"2025-02-11T09:04:55+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/"},"wordCount":16724,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/05\/web-development-tools.png","keywords":["web development tools","webdev"],"inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/","url":"https:\/\/kinqsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/","name":"62 \u00d3timas Ferramentas de Desenvolvimento Web","isPartOf":{"@id":"https:\/\/kinqsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/05\/web-development-tools.png","datePublished":"2021-05-31T06:09:51+00:00","dateModified":"2025-02-11T09:04:55+00:00","description":"Explore 62 ferramentas incr\u00edveis de desenvolvimento web que voc\u00ea pode aproveitar para aumentar suas habilidades e produtividade na web.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinqsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/#primaryimage","url":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/05\/web-development-tools.png","contentUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/05\/web-development-tools.png","width":1461,"height":731,"caption":"60 Fant\u00e1sticas Ferramentas de Desenvolvimento Web a Utilizar em 2021"},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/pt\/blog\/ferramentas-de-desenvolvimento-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Ferramentas de Desenvolvimento Web","item":"https:\/\/kinqsta.com\/pt\/topicos\/ferramentas-desenvolvimento-web\/"},{"@type":"ListItem","position":3,"name":"62 \u00d3timas Ferramentas de Desenvolvimento Web"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/pt\/#website","url":"https:\/\/kinqsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinqsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.","sameAs":["https:\/\/salmanravoof.com","https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/","https:\/\/x.com\/salmanravoof"],"url":"https:\/\/kinqsta.com\/pt\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts\/43050","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/comments?post=43050"}],"version-history":[{"count":16,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts\/43050\/revisions"}],"predecessor-version":[{"id":64399,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts\/43050\/revisions\/64399"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43050\/translations\/en"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43050\/translations\/de"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43050\/translations\/fr"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43050\/translations\/it"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43050\/translations\/nl"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43050\/translations\/pt"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43050\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43050\/translations\/se"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43050\/translations\/jp"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43050\/translations\/dk"},{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43050\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/media\/43054"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/media?parent=43050"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/tags?post=43050"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/topic?post=43050"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}