Chrome

7 extensões Google Chrome para Programadores

7 extensões do Chrome úteis para Programadores

7 extensões do Chrome úteis para Programadores 1240 700 Bruno Brito

Na semana passada partilhei contigo as minhas extensões preferidas de uso geral para o Chrome, e noutro artigo apresentei 7 aplicações que utilizo diariamente enquanto programo.

Hoje, faz sentido combinar os 2 tópicos: extensões para o Google Chrome que te podem ajudar em várias tarefas de programação!

Neste momento, confesso que ando muito impressionado com o Firefox Quantum: Developer Edition, mas ainda recorro ao Chrome com bastante frequência devido a extensões como aquelas que te vou apresentar de seguida.

Cada extensão torna o browser mais pesado, e ocupa um pouco mais de espaço na barra superior. Como tal, recomendo que as instales mas que as mantenhas desactivadas.

Activa-as apenas quando precisares, recorrendo a outra extensão que também já mencionei no passado – Extensity. Facilita imenso este processo de “ON/OFF”.

E se, como eu, também gostares de usar o browser Opera, não te esqueças que todas estas extensões são também compatíveis com ele.

Vamos então conhecê-las!

#1: One App

One App Webpage

Esta extensão não tem propriamente a ver com código, mas tenho-a sempre activa porque é a minha página pré-definida sempre que abro uma nova tab.

Se programas, provavelmente também visitas sites como o Hacker News, Product Hunt, Designer News ou Github, certo?

O objectivo desta extensão é trazer-te todos os tópicos quentes desses e de outros sites – um verdadeiro “All in One”. Curiosamente, todos eles já faziam parte da minha rotina, pelo que a instalei de imediato. É muito mais fácil estar em cima dos acontecimentos assim.

Podes espreitar o site sem instalar seja o que for, bastando para isso clicar aqui. Como não existe uma app móvel, no telefone e tablet tenho simplesmente esta página definida como a homepage.

#2: CSS Peeper

CSS Peeper

Esta extensão não te vai substituir as visitas às Developer Tools, mas é útil para rapidamente veres a paleta de cores de um site, ou descarregar as várias imagens que lá estão (incluindo SVGs).

Para o download de materiais dá bastante jeito, porque até te cria um ficheiro ZIP com tudo, se quiseres.

#3: FontFace Ninja

FontFace Ninja

No passado utilizava o WhatFont, mas esta extensão é muito mais completa.

Não só detecta todos os tipos de letra utilizados na página em que te encontras, como te oferece um botão para download de qualquer uma, assumindo que são gratuitas. Também as podes gravar como favoritas, se tiveres conta no FontFace Dojo.

Se passares o rato por qualquer texto da página também podes ver o tipo de letra utilizado naquele caso específico, o tamanho e line-height, e ainda a cor. Se clicares nesse mesmo texto, surge uma caixa que te permite escrever o que quiseres e alterar essas propriedades, para conferires o resultado final.

#4: Window Resizer

Window Resizer Google Chrome

É frequente ter de testar um site em várias resoluções, e apesar das Developer Tools serem essenciais para testes em mobile, para testes no desktop prefiro recorrer a esta extensão.

Podes gravar uma combinação de resoluções que queiras utilizar com frequência, ou simplesmente redimensionar o browser, que a extensão indicará o tamanho da janela e do viewport.

Também suporta atalhos de teclado, para o caso de quereres rapidamente alternar entre várias resoluções.

#5: Vimium

O Vim é popular entre programadores, e um dos motivos do seu sucesso é o facto de permitir praticamente tudo sem termos de utilizar o rato. Esta extensão é inspirada nisso mesmo, mas para navegar pela Web.

Podes recorrer a imensos comandos para manteres os dedos no teclado. Eu, habitualmente, só utilizo o J e K para fazer scroll e a possibilidade de navegar para qualquer outra página carregando numa só tecla.

Para esta última funcionalidade, só tens de carregar na tecla F: surge uma etiqueta amarela ao lado de cada link disponível, com o atalho que podes utilizar, como podes ver nesta imagem.

Vimium links

Esta é a lista de atalhos de teclado completa:

Vimium lista de comandos

#6: JSONView

Se já abriste ficheiros JSON no browser, sabes que o output não é bonito. Esta extensão resolve isso, tornando tudo bem legível, com a ajuda de cores e com a possibilidade de minimizares os objectos que não interessarem.

JSON View

Existem várias extensões disponíveis para isto, mas esta é provavelmente a mais popular.

#7: WhatRuns

Para “cuscar” a tecnologia utilizada por cada site, recorro a esta extensão, que é muito similar à Wappalyzer. O WhatRuns identifica milhares de tecnologias, parecendo trazer resultados mais fiáveis que a alternativa.

WhatRuns

Conhece um pouco de tudo: seja uma framework como Bootstrap ou Foundation, um CMS como WordPress ou Joomla, ferramentas para apresentar publicidade, métodos de pagamento, tipos de letra… se for suficientemente popular, o mais provável será detectar sem problemas.


Estas são as minhas “armas secretas” para o Google Chrome. Uma excelente companhia para um editor de texto bem artilhado, seja ele o SublimeText (estas são as minhas dicas) ou o VS Code (idem).

Tens outras extensões que utilizes e que recomendes?

Google Chrome - 5 extensões obrigatórias

5 extensões obrigatórias para o Chrome

5 extensões obrigatórias para o Chrome 1240 700 Bruno Brito

Existem cada vez mais extensões disponíveis para artilhares o teu browser com alguns super-poderes adicionais. Já mencionei algumas essenciais para blogging, e hoje destaco aquelas que considero indispensáveis para um uso mais generalizado.

Estas são, de longe, as 5 extensões que mais utilizo diariamente, com a excepção de 2 que optei por omitir por serem sobejamente conhecidas (e já divulgadas noutros artigos) – o LastPass e o Pocket.

Tenho muitas outras instaladas, mas nem todas estão activadas todo o dia. Não te esqueças de utilizar o Extensity para facilmente activar/desactivar aquelas extensões de uso esporádico.

Por ser baseado no Chromium, todas são também compatíveis com o Opera, o meu browser mais utilizado – e algumas estão disponíveis para outros browsers, como o Firefox.

Vamos então conhecê-las!

#1: Video Speed Controller

Video Speed Controller

Se só pudesse ter uma extensão instalada no meu browser, esta seria provavelmente a eleita.

Quando estou no Youtube, é raro ver os vídeos à velocidade original – como são geralmente conversas ou tutoriais, o habitual é vê-los a 1.25x ou mesmo 1.5x.

Como seria bom poder acelerar todos os outros vídeos da mesma forma! Foi precisamente isso que me fez ir à caça desta extensão.

O Video Speed Controller permite-te acelerar qualquer vídeo HTML5 – que, felizmente, são a maioria dos vídeos presentes na Web hoje em dia. E, claro, também o podes utilizar em sites como o YouTube ou o DailyMotion.

Video Speed Controller em acção

A extensão inclui ainda atalhos de teclado e a possibilidade de recuares/avançares 10 segundos no vídeo (valor esse que podes alterar).

Também é possível indicar quais os sites em que não pretendes ter esta extensão disponível (adicionando-os à blacklist).

Se nunca experimentaste, recomendo vivamente que dês uma chance a ver vídeos a uma velocidade mais elevada – é bem mais produtivo!

#2: uBlock Origin

uBlock Origin

Um bom ad blocker é essencial nos dias de hoje, e ainda não encontrei nenhum melhor que o uBlock Origin – que, atenção, nada tem a ver com o site ublock.org.

O uBlock Origin foi concebido para bloquearmos tudo o que entendemos como desnecessário, melhorando a performance do browser (e do computador) pelo caminho. Por esse motivo, acaba por ser muito mais que um mero “ad blocker”.

uBlock Origin em acção

Para além de impedir a maior parte dos anúncios e te proteger de trackers e malware sem teres que te preocupar com configurações complicadas, também inclui um modo avançado para quem sabe o que está a fazer.

Aí, podes acrescentar regras adicionais, filtros personalizados, ou até definir uma firewall para cada site.

Esta extensão é open-source e também está disponível para os restantes browsers: Firefox, Microsoft Edge e Safari.

#3: Dark Reader

Dark Reader

Sou um enorme fã de temas dark no computador, e sempre que um site apresenta essa opção, activo-a de imediato.

O Dark Reader oferece essa possibilidade para o resto da web – alterando o fundo para preto e as letras para branco.

Wikipedia no Dark Reader

Na minha experiência, funciona perfeitamente na maior parte dos sites que visito diariamente.

Um interruptor ON/OFF seria suficiente para mim, mas esta extensão vai um pouco mais longe, permitindo-te ainda definir parâmetros como o brilho e o contraste do site – ou até deixá-lo a preto e branco!

Neste vídeo podes ficar com uma melhor ideia das funcionalidades. É óptimo até para questões de acessibilidade para alguns sites.

#4: HTTPS Everywhere

HTTPS Everywhere

Uma extensão que te transforma os pedidos de HTTP em pedidos HTTPS sempre que possível, aumentando a tua segurança na web de forma automática.

Nos dias de hoje, o HTTPS ainda não é o “default” e esta extensão visa corrigir isso mesmo: é um esforço do Tor Project e da Electronic Frontier Foundation.

É uma extensão bastante invisível, mas que vale a pena ter instalada, sendo já compatível com milhares de sites.

#5: Pushbullet

Pushbullet

Demorei algum tempo a instalar esta extensão no meu browser porque pensava que não precisava assim tanto de controlar o meu telemóvel Android a partir do computador. Como estava enganado!

O Pushbullet apresenta todas as notificações que recebas no telemóvel de imediato no teu browser, e oferece-te a possibilidade de enviar SMS, ficheiros de um lado para o outro e até podes integrá-lo com outros serviços, como o Zapier.

O plano gratuito é bastante generoso, oferecendo-te o envio de ficheiros de até 25 MB, 100 SMS por mês e 2 GB de espaço de alojamento.

Pessoalmente, nunca senti necessidade de passar para o plano pago, mas se fores um utilizador mais exigente, podes fazer upgrade para o plano “Pro” por $4.99/mês.

Funciona também no Firefox, tem uma app Windows e está também disponível para iPhone.


Estas são as minhas armas secretas. Quais são as tuas? Partilha as tuas dicas nos comentários!

12 extensões do Chrome para bloggers

12 extensões do Chrome indispensáveis para bloggers

12 extensões do Chrome indispensáveis para bloggers 620 350 Bruno Brito

Blogging. Ao início, o grande desafio é a escrita. Mas à medida que a nossa lista de artigos publicados cresce, começamos a reparar que há muitos outros factores que contribuem para o post perfeito.

Os factos certos. As imagens adequadas. A promoção ideal. Um site rápido e apelativo. Tudo isto também conta.

Um bom blogger escreve muito e bem. Mas para tal, também precisa de adquirir automatismos. Pode aprender a escrever mais depressa e dominar na perfeição o seu computador, mas certamente terá de continuar atento a tudo o que poderá fazer para melhorar a sua produtividade.

Muitos estão preocupados em comprar o software ideal para determinada tarefa ou até em mudar de sistema operativo (ou passar de WordPress para algo diferente, como o Ghost), acabando por subestimar pelo caminho uma excelente fonte de apps: as extensões do browser.

Apesar de existirem centenas de soluções também para Firefox, neste artigo vou-me focar nas extensões que utilizo no Chrome, aquele que é o meu browser de eleição desde o dia em que foi lançado.

Em baixo podemos encontrar extensões que nos ajudam em vários processos importantes:

  • a criação do artigo;
  • a divulgação nas redes sociais;
  • a análise de visitas ao site e optimização para motores de busca;
  • melhorias relativamente a performance, design e usabilidade do site.

Vamos a isto!

Extensões para criar o artigo

Criar o artigo é, para a grande maioria, a parte mais divertida do blogging.

Estas são algumas extensões que tornam o processo criativo mais rápido e eficaz.

Save to Pocket

Save to Pocket na Chrome Web Store

Quando estamos a escrever artigos de cariz informativo, é natural fazer algum trabalho de pesquisa prévio para acrescentar o máximo de valor ao nosso post.

Sem surpresa, o já anteriormente mencionado Pocket é a minha extensão de eleição para arquivar os artigos de maior interesse que encontro diariamente na Internet.

Basta clicar na extensão para guardarmos a página onde nos encontramos, para consultar com atenção mais tarde. Podemos adicionar tags para facilitar a navegação mais tarde.

Uma página guardada no Pocket

O Pocket está disponível em todas as plataformas mais populares e, apesar de ser tremendamente simples, não deixa de ser das apps mais úteis desta lista.

Evernote Web Clipper

Evernote Web Clipper na Chrome Web Store

Muitos bloggers não conseguem viver sem o Evernote, indubitavelmente uma das melhores apps já criadas.

Às vezes, arquivar uma página no Pocket não chega. Queremos adicionar de imediato alguns apontamentos, integrá-las num conjunto de notas referentes a um projecto ou, simplesmente, preferimos concentrar toda a informação no Evernote e não espalhá-la por várias apps. Nesse caso, esta extensão é de facto uma grande ajuda.

O Evernote Web Clipper

O Evernote tem vindo a melhorar a cada actualização e agora, para além de podermos gravar a página em que nos encontramos em diferentes formatos (como uma versão minimalista da página se optarmos por Simplified, algo que o Pocket também faz) podemos tirar Screenshots (afinal de contas, o Evernote comprou, em 2011, o Skitch).

Podemos depois arquivar determinada página na nossa pasta de notas do projecto ou adicionar-lhe etiquetas, tornando-se uma solução mais robusta que o Pocket para quem pesquisa intensivamente antes de começar a escrever.

Awesome Screenshot: Capture & Annotate

Awesome Screenshot na Chrome Web Store

Apesar do Skitch ser genial, a minha extensão para capturas de ecrã preferida é a Awesome Screenshot.

Já experimentei muitas e algo que sempre deixou a desejar é a captura de página inteira – em muitos sites ou não era possível ou o background repetia ao longo da página. Tal não é o caso com esta, dando-nos também a hipótese de apenas capturar o que está visível ou uma área em particular.

Awesome Screenshot

Depois de capturar o ecrã, temos a opção de adicionar algumas notas (texto, alguns símbolos ou crop) antes de gravar (online ou offline) ou imprimir.

Pessoalmente, nunca tive sucesso com a funcionalidade de copy para o clipboard, pelo que opto sempre por gravar como PNG.

Check my links

Check my links na Chrome Web Store

Depois de publicarmos o nosso artigo, convém verificar se todos os links funcionam – missão especialmente demorada se tivermos dezenas de hiperligações no artigo.

Com esta extensão, basta um clique.

Check my links extension

Depois do relatório, podemos corrigir os links errados rapidamente, visto que todos os links ficarão sublinhados a verde ou a vermelho ao longo da página.

Extensões para Social Media

O trabalho de um blogger está longe de estar terminado depois de criar e publicar o artigo. Agora é a altura de o divulgar, visto que a sua obra só será encontrada através de motores pesquisa ou redes sociais (e o 2º influencia o 1º).

Aqui ficam 2 extensões que nos facilitam a vida nesta tarefa.

Buffer

Buffer na Chrome Web Store

Esta é uma das minhas apps preferidas, se não a minha #1. Todos os dias a utilizo e a própria empresa já foi destaque no Conteúdo é Rei.

Com esta extensão, partilhar um artigo torna-se o acto mais simples do mundo. Podemos, para além de partilhar no Facebook/Twitter/LinkedIn/Google+ de imediato, agendar o nosso post ou adicioná-lo à nossa lista de artigos a partilhar mais tarde.

Um artigo partilhado no Twitter e Facebook com o Buffer

Seja para partilhar os nossos artigos ou para gerir a própria marca pessoal, o Buffer é indiscutivelmente, nos dias que correm, a aplicação #1 de Social Media.

ShareMetric

NOTA: extensão entretanto removida. Como alternativa, recomendo o SharedCount.

ShareMetric na Chrome Web Store

Há inúmeras formas de saber quantas vezes o nosso artigo foi partilhado, mas poucas são tão imediatas quanto o ShareMetric.

ShareMetric

Num clique ficamos a saber o número de interacções que ocorreram no Facebook/Twitter/LinkedIn/Google+ da página em que nos encontramos.

Extensões para Analytics / SEO

Depois de criar o artigo e promovê-lo, convém avaliar a sua prestação para entender que tipo de conteúdos são os preferidos dos visitantes e como as nossas páginas são encaradas pelos motores de busca.

É aqui que entra o Analytics e claro, o SEO.

Page Analytics (by Google)

Page Analytics na Chrome Web Store

Esta é provavelmente a extensão mais recente da lista, o que me faz pensar como é que passei tanto tempo sem ela.

O Page Analytics dá-nos a informação mais directa que teríamos acedendo ao Google Analytics, mas sob a forma de uma barra no topo do ecrã.

Podemos assim contar instantaneamente com as Pageviews, Time on Page, Bounce Rate para qualquer página onde temos direitos de Google Analytics, bastando para tal ter feito o login com a nossa conta Google.

O Page Analytics em brunobrito.pt

Esta aplicação permite ainda definir o período de tempo que queremos analisar e apresenta as visitas em tempo real. Como se tal não bastasse, ainda exibe o número de clique que cada conteúdo da mesma página recebeu, para descobrirmos num ápice quais os artigos mais visitados.

MozBar

MozBar na Chrome Web Store

Seria difícil falar em ferramentas de SEO sem referir a MozBar, a extensão de uma das marcas mais populares deste mundo: a Moz.

A MozBar

À semelhança do Page Analytics, a MozBar é uma barra que surge no topo do ecrã e que nos dá algumas informações relevantes sobre o nosso site, como o Page Authority ou o Mozrank, que nos dão uma ideia do quão valorizada a nossa página é junto aos motores de busca.

Para além desta informação, ainda podemos saber o número de partilhas nas redes sociais (de forma menos detalhada do que com o ShareMetric) e uma rápida avaliação de Meta Descriptions, Keywords e até tempo de carregamento.

Extensões para os mais técnicos

Muitos bloggers são também os próprios webmasters. São eles que têm de corrigir bugs, instalar (e editar) themes, adicionar plug-ins e garantir que a performance do site é razoável para todos.

Para os mais técnicos, eis aqui 4 boas sugestões.

Firebug Lite for Google Chrome™

Firebug Lite na Chrome Web Store

Esta extensão dispensa apresentações para quem está habituado a editar HTML e CSS. Por muito que os browsers tenham os seus inspectores (no Chrome basta premir F12), nada atinge o nível do Firebug.

A extensão para Chrome ainda não está ao nível da disponível para o Firefox, mas não deixa de ser a melhor solução que conheço para rapidamente inspeccionar o código de uma área do site.

O Firebug Lite para Chrome

A magia acontece quando clicamos em Inspect. Depois, basta seleccionar a área do site que queremos inspeccionar, por exemplo para mudar a cor da font no ficheiro CSS ou o tamanho da letra. Claro que para quem tiver conhecimentos avançados de CSS, o céu é o limite!

WhatFont

WhatFont na Chrome Web Store

Escreva-se ou não em Markdown, o produto final convém ser altamente legível, sob o risco de ninguém ler o que acabámos orgulhosamente de publicar.

O WhatFont já foi abordado antes e é uma espécie de Shazam para descobrir rapidamente o tipo de letra utilizado por qualquer site. Para além da font, também podemos contar com o tamanho de letra e a cor.

ColorZilla

Colorzilla na Chrome Web Store

À semelhança do Firebug, esta é uma extensão que devido à popularidade adquirida no Firefox, teve de ser adaptada também para o Chrome.

O ColorZilla em acção

Utilizar o Colorzilla dificilmente poderia ser mais simples – basta clicar na aplicação para instantaneamente sabermos a Web Color de qualquer objecto no ecrã. Ao clicarmos na cor que queremos guardar, ficamos com a Web Color instantaneamente copiada no clipboard para a utilizarmos de seguida (no Photoshop, por exemplo).

Outra funcionalidade interessante é o Webpage Color Analyzer, ideal para rapidamente ficarmos com o esquema de cores de um theme.

YSlow

YSlow na Chrome Web Store

Os tempos de carregamento de uma página são importantes, não só para garantir uma boa experiência a qualquer visitante (esteja ele no desktop com uma ligação por cabo de 100 MB ou no telemóvel por 3G) como por motivos de SEO – é sabido que o Google privilegia sites de carregamento veloz.

Optimizar o site é conversa para outro dia (infelizmente não chega comprimir imagens), mas o que não falta são aplicações que rapidamente avaliam os tempos de carregamento de qualquer site.

Exemplos são a MozBar (referida em cima), o serviço PageSpeed da Google, o GTmetrix ou o Pingdom.

Apesar da vasta oferta de serviços deste género, o meu voto vai para esta extensão da Yahoo: o YSlow.

BrunoBrito.PT no YSlow

Depois de um clique, o YSlow avalia o nosso site e dá não só uma nota de performance, como sugere pontos que podemos corrigir para melhorar a prestação do nosso site.

Conclusão

Nem todos os utilizadores gostam de artilhar os seus browsers com extensões, mas é inegável que muitas podem levar o nosso blogging para um nível superior ou, pelo menos, facilitar em muito a nossa vida.

Esqueci-me de alguma? Quais são as vossas extensões preferidas?

Se quiser entrar em contacto comigo, pode enviar-me um e-mail para [email protected] ou preencher o formulário abaixo.

NOTA: Todos os campos são de preenchimento obrigatório.