\n Tudo nasce do c\u00f3digo para um desenvolvedor, ent\u00e3o \u00e9 natural come\u00e7ar com a melhor ferramenta de edi\u00e7\u00e3o que voc\u00ea pode encontrar. O Komodo Edit \u00e9 bastante kosher para tudo isso e muito mais. \u00c9 um \u00f3timo editor de texto multiplataforma e multil\u00edngue para voc\u00ea escrever e editar seu c\u00f3digo. Ah, e \u00e9 gr\u00e1tis.\n<\/p>\n
\n A ferramenta funciona em Windows, Mac, Linux\/UNIX, ent\u00e3o n\u00e3o se preocupe. Tamb\u00e9m gostamos dele por seu recurso de preenchimento autom\u00e1tico de c\u00f3digo para linguagens como HTML, CSS, JavaScript, Java, PHP, Ruby, Perl (para cerca de 5 pessoas no mundo), etc. Esse \u00e9 um editor de texto inteligente.\n<\/p>\n
\n Pontos de b\u00f4nus para maior conveni\u00eancia do recurso Project Manager para organizar e manter o controle de arquivos.\n<\/p>\n
\n 2 Criador de CSS 3.0
\n<\/h5>\n
\n \n Vamos ser honestos, apesar de tudo que voc\u00ea ama no CSS3, voc\u00ea n\u00e3o pode deixar de odi\u00e1-lo um pouco quando se trata de escrever sintaxe para coisas como bordas arredondadas. \u00c9 um detalhe t\u00e3o trivial para perder o sono, mas voc\u00ea faz de qualquer maneira. Voc\u00ea n\u00e3o pode memorizar mais de 100 novas propriedades e seus respectivos prefixos. Ent\u00e3o, gra\u00e7as a Deus por uma ferramenta como o CSS 3.0 Maker.\n<\/p>\n \n Esta pequena ferramenta online permitir\u00e1 que voc\u00ea copie e cole c\u00f3digos complicados em sua folha de estilo. Ele gera c\u00f3digo para detalhes de estilo, como raios de caixa, gradientes, texto e sombras de caixa, transforma\u00e7\u00f5es, transi\u00e7\u00f5es e rota\u00e7\u00f5es de sua escolha. Ele tamb\u00e9m mostrar\u00e1 quais navegadores de desktop e m\u00f3veis suportam essas propriedades de estilo. Uma pequena \u00e1rea de visualiza\u00e7\u00e3o mostrar\u00e1 o efeito, o c\u00f3digo pode ser copiado da caixa de visualiza\u00e7\u00e3o ou baixado em um arquivo HTML.\n<\/p>\n \n Para aqueles de n\u00f3s que n\u00e3o podem dedicar muito tempo a detalhes de estilo aparentemente banais, esta ferramenta \u00e9 um salva-vidas.\n<\/p>\n \n \n “Liberte-se do inferno do prefixo CSS!” \u2013 P\u00e1gina de introdu\u00e7\u00e3o sem prefixo.\n<\/p>\n \n Esta \u00e9 uma ferramenta pr\u00e1tica, trazida para nos libertar do ‘prefixo inferno' por um anjo chamado Lea Verou do Github. Ele adicionar\u00e1 o prefixo do fornecedor (em algum lugar que voc\u00ea n\u00e3o pode ver) \u00e0s folhas de estilo em\n<\/p>\nou elementos. Al\u00e9m disso: voc\u00ea n\u00e3o ter\u00e1 que se preocupar com novos elementos\nou, prefixos do jQuery ou quaisquer altera\u00e7\u00f5es que fizer, porque cobrir\u00e1 tudo.<\/p>\n \n O que h\u00e1 para n\u00e3o gostar?\n<\/p>\n \n \n ‘Lorem Ipsum' tem sido o texto de substitui\u00e7\u00e3o por muito tempo. Felizmente, agora temos Blokk: a fonte para acabar com a ‘dor' do latim incompreens\u00edvel.\n<\/p>\n \n O Blokk fornece um ‘texto' de bloco para ser usado como espa\u00e7o reservado durante a cria\u00e7\u00e3o de maquetes e wireframes. Tamb\u00e9m n\u00e3o \u00e9 preciso dizer que isso n\u00e3o vai confundir os clientes menos familiarizados com a web durante as apresenta\u00e7\u00f5es.\n<\/p>\n \n \n Antes que as fontes de \u00edcones se tornassem uma coisa, os desenvolvedores precisavam da ajuda de designers para criar \u00edcones escal\u00e1veis. O tempo que levou para desenvolv\u00ea-los (que, ali\u00e1s, inclui criar, extrair, implementar e personalizar) beirava o ‘absolutamente rid\u00edculo'. Mas ent\u00e3o algu\u00e9m transformou \u00edcones em fontes e todos viveram felizes\u2026 em um futuro previs\u00edvel.\n<\/p>\n \n Fontello \u00e9 um \u00f3timo gerador de fontes de \u00edcones. Ele permitir\u00e1 que voc\u00ea escolha entre milhares de \u00edcones, personalize seu mapeamento ou edite seus nomes e os compile em um \u00fanico arquivo de fonte. \u00c9 incr\u00edvel e \u00e9 gr\u00e1tis.\n<\/p>\n \n N\u00e3o podemos agradecer a Vitaly Puzrin o suficiente.\n<\/p>\n \n \n Ative o JavaScript do seu navegador e comece a testar a apar\u00eancia da fonte escolhida em um site real.\n<\/p>\n \n Typetester \u00e9 descomplicado. Ele permite inserir e comparar diferentes fontes e testar sua apar\u00eancia. Voc\u00ea tamb\u00e9m pode brincar com tamanho, rastreamento, cor, etc. at\u00e9 conseguir o que deseja. Voc\u00ea pode comparar at\u00e9 36 fontes diferentes ao mesmo tempo. Imagine quanto tempo voc\u00ea pode economizar com isso.\n<\/p>\n \n \u00c9 muito legal.\n<\/p>\n \n \n A codifica\u00e7\u00e3o pode ser um pouco cansativa \u00e0s vezes, mas a limpeza de c\u00f3digo existe no N\u00edvel: T\u00e9dio Total. \u00c9 necess\u00e1rio, por\u00e9m, se voc\u00ea quiser evitar erros e carregar mais r\u00e1pido.\n<\/p>\n \n O Dirty Markup ajuda a economizar o tempo que voc\u00ea poderia gastar em atividades mais interessantes (sandu\u00edche de bacon, algu\u00e9m?). Este vem com recursos combinados de outras ferramentas de limpeza de sintaxe \u00fanica. Estamos falando de HTML Tidy, CSS Tidy, JS Beautify e Ace Editor. Esse \u00e9 um limpador abrangente.\n<\/p>\n \n \u00c9 um aplicativo baseado na web para limpar e formatar seu HTML, CSS e JavaScript. N\u00e3o podemos pedir mais.\n<\/p>\n \n \n Voc\u00ea pode se tornar um vigilante matador de insetos com esta ferramenta poderosa.\n<\/p>\n \n BugHerd segue o antigo ditado de ‘Mantenha-o curto e simples, est\u00fapido'. Ele pode capturar o feedback do cliente, resolver problemas menores sozinho, rastrear bugs (para voc\u00ea exterminar). Ele tamb\u00e9m desempenhar\u00e1 o papel de secret\u00e1rio e gerenciar\u00e1 seus projetos.\n<\/p>\n \n Uma interface do usu\u00e1rio superf\u00e1cil de apontar e clicar em seu site permite que seus usu\u00e1rios relatem problemas. O BugHerd os transforma em relat\u00f3rios com todas as informa\u00e7\u00f5es que voc\u00ea pode precisar (como a vers\u00e3o do navegador do usu\u00e1rio). \u00c9 f\u00e1cil de configurar, divertido de usar e possui recursos como capturas de tela autom\u00e1ticas (extens\u00e3o do navegador), links diretos, anexos de arquivos, dados completos do seletor e discuss\u00f5es.\n<\/p>\n \n Com uma assinatura padr\u00e3o de $ 29\/m\u00eas, isso \u00e9 uma pegadinha.\n<\/p>\n \n \n Web design responsivo \u00e9 mais do que uma nova moda, pois veio para ficar. Mas, por enquanto, voc\u00ea encontrar\u00e1 layouts fluidos complicados na melhor das hip\u00f3teses. Voc\u00ea tamb\u00e9m ficar\u00e1 furioso tentando testar seu layout em v\u00e1rios tamanhos de tela.\n<\/p>\n \n Felizmente, Screenfly \u00e9 um pequeno aplicativo da web que testar\u00e1 suas consultas @media para voc\u00ea. Voc\u00ea insere seu URL e ele mostra como suas consultas lidam com as dimens\u00f5es do dispositivo em que voc\u00ea est\u00e1 clicando no painel superior.\n<\/p>\n \n Isso n\u00e3o leva em considera\u00e7\u00e3o a diferen\u00e7a de renderiza\u00e7\u00e3o entre os navegadores, mas voc\u00ea pode usar o Browser Shots para isso. Caso contr\u00e1rio, \u00e9 uma maneira simples e bem montada de ver a apar\u00eancia do seu site em diferentes resolu\u00e7\u00f5es.\n<\/p>\n \n \n J\u00e1 que estamos falando de RWD, podemos come\u00e7ar falando de frameworks para desenvolv\u00ea-lo.\n<\/p>\n \n O debate na internet sobre qual framework de front-end \u00e9 melhor: Bootstrap ou Foundation? Voc\u00ea pode usar um ou outro. Mas o Foundation est\u00e1 um pouco mais \u00e0 frente quando se trata de sistemas de grade, unidades proporcionais para design (embora o Bootstrap 4.0 Alpha tenha mudado para unidades em e rem), suporte da direita para a esquerda, tabelas de pre\u00e7os, passeios e navega\u00e7\u00e3o fora da tela .\n<\/p>\n \n \u00c9 \u00f3bvio que preferimos Foundation. Ele funciona com SASS e CSS, est\u00e1 repleto de recursos e geralmente \u00e9 mais conveniente e flex\u00edvel.\n<\/p>\n \n Concordamos com Zurb sobre isso: \u00e9 ‘muito r\u00e1pido'.\n<\/p>\n \n \n Depois de uma d\u00e9cada de software que coloca o design antes do c\u00f3digo, a Adobe finalmente d\u00e1 uma vantagem aos programadores.\n<\/p>\n \n Esta variedade francamente incr\u00edvel de ferramentas e servi\u00e7os \u00e9 feita tendo em mente as novas tend\u00eancias de codifica\u00e7\u00e3o de front-end. Eles nos deram um belo presente. Edge Animate para ajudar os programadores a criar anima\u00e7\u00f5es enquanto erradica simultaneamente todos os vest\u00edgios de Flash. Desculpe, Adobe, o Flash foi \u00f3timo. Mas o Animate usa HTML e JavaScript padr\u00e3o, e voc\u00ea sabe, tamanho \u00fanico…\n<\/p>\n \n Existe o Edge Code para edi\u00e7\u00e3o de CSS a partir de um documento HTML. O Inspect consolida o teste de navegador e os testes de compatibilidade de dispositivos para um design responsivo e sincroniza todos eles para uma atualiza\u00e7\u00e3o\/personaliza\u00e7\u00e3o super r\u00e1pida. O imensamente popular Typekit agora faz parte da fam\u00edlia Edge. O Reflow ainda est\u00e1 para ser lan\u00e7ado, mas provavelmente ir\u00e1 explodir outros criadores de grades CSS front-end. E ainda tem mais.\n<\/p>\n \n N\u00f3s sabemos. Tamb\u00e9m tivemos que arrancar nossas mand\u00edbulas do ch\u00e3o.\n<\/p>\n \n \n O Vagrant \u00e9 muito mais do que um software de desenvolvimento virtual.\n<\/p>\n \n Essa beleza permite criar ambientes de trabalho port\u00e1teis e facilmente reprodut\u00edveis. Ele consolida o software de virtualiza\u00e7\u00e3o, a caixa b\u00e1sica do servidor e as ferramentas de configura\u00e7\u00e3o em um pacote poderoso. Basicamente, voc\u00ea n\u00e3o precisa mais ter o VirtualBox + Ubuntu + Chef. O Vagrant far\u00e1 o trabalho dos tr\u00eas e ocupar\u00e1 menos espa\u00e7o ao faz\u00ea-lo. Os usu\u00e1rios avan\u00e7ados tamb\u00e9m lhe dir\u00e3o como ele permite que voc\u00ea configure facilmente redes multi-VM.\n<\/p>\n \n Est\u00e1 escrito em Ruby, mas funcionar\u00e1 para PHP, Java, JavaScript, Python e C#. Voc\u00ea pode trabalhar com o Vagrant no Windows, Mac OSX, Linux e FreeBSD.\n<\/p>\n \n \u00c9 super r\u00e1pido porque n\u00e3o tem nada do U-friendly que parece bom, mas ocupa o espa\u00e7o necess\u00e1rio. Ele funciona bem como um ambiente de teste para desenvolvedores.\n<\/p>\n \n Isso \u00e9 o mais pr\u00f3ximo do Santo Graal que podemos chegar.\n<\/p>\n \n \n O PageSpeed \u200b\u200bInsights do Google faz exatamente o que diz na lata. Ele fornece informa\u00e7\u00f5es sobre o desempenho do front-end da sua p\u00e1gina. Isso vai abrir os olhos de muitos desenvolvedores poderosos por a\u00ed. Portanto, divirta-se e comece a calv\u00edcie acelerada de todos os cabelos que ser\u00e3o puxados.\n<\/p>\n \n Tudo o que ele faz \u00e9 medir o tempo decorrido entre: solicita\u00e7\u00e3o e renderiza\u00e7\u00e3o de conte\u00fado acima da dobra e solicita\u00e7\u00e3o e renderiza\u00e7\u00e3o de p\u00e1gina inteira.\n<\/p>\n \n Ele verificar\u00e1 os aspectos independentes da rede para calcular o desempenho da sua p\u00e1gina: configura\u00e7\u00e3o do servidor, estrutura HTML, JavaScript, CSS e imagens.\n<\/p>\n \n \u00c9 n\u00edtido e impiedosamente r\u00e1pido; ent\u00e3o definitivamente vai ferir seus sentimentos e possivelmente fazer voc\u00ea chorar se voc\u00ea pontuar baixo. Ele tamb\u00e9m tentar\u00e1 compensar, dando-lhe sugest\u00f5es pontuais para melhorar seu desempenho, como um pai condescendente.\n<\/p>\n \n E n\u00f3s amamos isso.\n<\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-63844581a0a86.webp\")
<\/a>\n<\/p>\n\n 3 \u2013 sem prefixo
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-63844583d44dd.webp\")
<\/a>\n<\/p>\n\n 4 libras de bloco
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-638445861b498.webp\")
<\/a>\n<\/p>\n\n 5 fontes
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-638445880da58.webp\")
<\/a>\n<\/p>\n\n 6 testes de tipo
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-6384458ad95f3.webp\")
<\/a>\n<\/p>\n\n 7 marca\u00e7\u00e3o suja
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-6384458e305ed.webp\")
<\/a>\n<\/p>\n\n 8 BugHerd
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-63844590dfd3c.webp\")
<\/a>\n<\/p>\n\n 9 Screenfly
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-63844592db210.webp\")
<\/a>\n<\/p>\n\n 10 Funda\u00e7\u00e3o
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-6384459574e29.webp\")
<\/a>\n<\/p>\n\n 11 Adobe Edge
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-63844597e33a5.webp\")
<\/a>\n<\/p>\n\n 12 vagabundos
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-6384459a1429e.webp\")
<\/a>\n<\/p>\n\n 13 Informa\u00e7\u00f5es do PageSpeed
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-6384459ca2be9.webp\")
<\/a>\n<\/p>\n\n 14 git
\n<\/h5>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-6384459f578c6.webp\")
<\/a>\n<\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-638445a2c069a.webp\")
<\/a>\n<\/p>\n