[DICAS E FERRAMENTAS] Extensões para editores de cógido, plugins para navegadores, sites,

Olá, pessoal!! Estou abrindo esse tópico tópico para que possamos compartilhar extensões para editores de cógido, plugins para browsers, ou outra ferramentas diversas que facilitem nossas vidas como programadores.

  • Apesar de não haver uma regra, seria interessante que deixem uma breve descrição para que as pessoas usuárias tenham uma noção se é vantajoso para elas ou não a instalação dessas ferramentas.

  • Exemeplo:
    Nome da extensão (nome do desenvolvedor da extenção) - descrição da funcionalidade.

18 Likes

EXTENSÕES VSCode:
Live Server (do Ritwick Dey) - extensão para não ter que ficar recarregando a página a cada mudança no código.
Basta clicar com o botão direito sobre o arquivo index.html e clicar em “abrir com live Server” / “Open with Live Server” (as alterações serão passadas ao navegador assim que você salvar seu arquivo no VScode).

Live Share (da Microsoft) - Usado para codar em tempo real com outras pessoas. Basta compartilhar seu link da sala e esperar os demais usuários chegarem.
*Acho que para usar tem que logar com uma conta microsoft.
*Para usar irá aparecer um novo ícone na barra lateral esquerda de navegação do VSCode (é até que bastante intuitívo, mas qualquer dúvida podem chamar aqui ou no slack).

prettier (Prettier) - Deixa seu código formatado (a formatação é basicamente o que entendemos por ‘formtação’ no word. margens, espaçamentos, quebras de linha, …) o que facilita muito a leitura do código.

  • esse link (inglês) explica melhor como usar a ferramenta, mas também não tem muito segredo.

indent-raibown (oderwat) - Essa extensão também facilita a leitura do código (apesar de algumas pessoas não gostarem tanto). Ela coloca uma cor na margem esquerda do código dependendo da itendação do código, facilitando a identificação do inicio e final de uma tag pai/mãe-filho/filha entre outros ponto.

Rainbow Brackets (2gua) - (EM DESUSO APÓS ATUALIZAÇÃO TRAZER ISSO DE FORMA NATIVA) similar à extensão de cima, porém ajuda a itentificar qual “()” ou “{}” está contido em outro “()” ou “{}”. (Será mais útil mais para frente). (porém a suas limitações, já que a ordem das cores não é definida por nível de profundidade. Ex. em um momento a estrutura “( ( ) )” pode apresentar os parenteses externos azuis e os internos vermelhos, mas em outro momento pode ser o inverso, mas ainda assim ajuda a identificar qual dos pares você está examinando no momento).

6 Likes

SITE:

Gerador gradient para background - Gera um código para utilizar como gradiente para cor de fundo.

  • usa o direcionamento do gradiente em graus, o que evita alguns problemas na hora de usar gradiente como background no css;
  • O site também trás uma demonstração de como fica o gradiente
6 Likes

O caminho é esse caio.
Parabéns. :slight_smile:

2 Likes

Plugin:

Testing Playground - plugin que ajuda a identificar os seletores mais adequados quando estamos fazendo teste com Jest ou RTL (caso ainda não tenham visto o conteúdo de testes ou ainda assim fique confuso, não é motívo de se preocupar, mas caso alguém tenha dúvida, manda aqui ou no slack <3).

4 Likes

Vlw, Tiago! Tmj

1 Like

Ameiii :heart_eyes: :heart_eyes: :heart_eyes:

2 Likes

eu não to entendo nada, mas vou abrsorvendo, vai que eu aprendo por osmose

4 Likes

Eu adoro esse repositório, tem muita coisa sobre programação, desde cursos até sites de fontes, cores, imagens… GitHub - arthurspk/guiadevbrasil: GUIA EXTENSO DE PROGRAMAÇÃO:

7 Likes

Já havia um tópico aqui chamado Dicas VSCode, criado pelo @aricyrulin

Lá tem uma listagem de alguns plug-ins que estamos utilizando :slight_smile:

6 Likes

Muito bom!

1 Like

Complementando… essa é a lista das extensões que eu estou utilizando no chrome:

ColorZilla: extrai as cores de qualquer elemento de qualquer site, e mostra o caminho HTML do elemento (XPath)

CSSViewer: exibe todas as propriedades CSS do elemento selecionado

Fonts Ninja: idenfica fontes
… → alternativa: WhatFont

GoFullPage: faz screenshot da página inteira de um site

HTML5 Outliner: permite visualizar a estrutura do html

JSON Formatter: permite a visualização do JSON

MarkUp For Chrome: permite captura de tela de sites com anotações

Raindrop.io: gerenciador de favoritos

React Developer Tools: permite inspecionar componentes react e as hierarquias deles

Video Speed Controller: permite assistir os vídeos na velocidade da luz e também controlar o avanço/retorno com 1 tecla

Web Developer: adiciona uma barra de tarefas com várias funcionalidades

6 Likes

Adorei a ideia, @caio.swame!

Já mencionaram a extensão colorzilla, o meu xodó :sparkling_heart:, então só tenho mais uma sugestão a acrescentar por ora: fontjoy , para quem mais gostar de brincar de escolher fontes e combinações entre elas.

P.S.: Antes de enviar o comentário, ainda falando de fontes, lembrei desse site aqui. Ele mostra combinações em layouts, o que é ótimo pra servir de inspiração na hora de usá-las.

4 Likes

EXTENSÕES PARA NAVEGADOR
Color by Fardos: Similar ao ColorZilla, capta o código de cores e traz algumas outras funcionalidades.
Lighthouse: Faz um teste de contraste (p/ acessibilidade)
Daily.dev: Homepage para devs, com notícias e artigos
UX Check: Informa sobre possíveis problemas de usabilidade de um site (baseado nas Nielsen’s Ten Heuristics).
Heurio - UX Check & Visual Feedback Tool: Similar ao UX Check.
Page Ruler: Medida (em pixels) de qualquer elemento da página.
Dimensions: Outra ferramenta de medidas.
Grid Ruler: Cria linhas auxiliares no navegador para fazer medidas em pixels.
SVG Grabber: Permite que você copie o código de todos os ícones e ilustrações SVG de um site

Atalhos úteis (windows):
Shift + Windows + S: Você seleciona uma área da sua tela para dar Print Screen! Não precisa mais printar sua tela toda e recortar pedaços num editor de imagens.
Windows + Seta para esquerda: Fará a janela ativa ficar pela metade encostada na parte esquerda da tela, e você pode escolher outra janela para compor a metade à direita.
Ctrl + Y: O contrário do Ctrl+Z, ele refaz a última ação.
Windows + V: Permite ativar o histórico da sua Área de Transferência. Assim você não perde os outros conteúdos que passaram pelo seu Ctrl + C. Após habilitado, se utilizar o comando novamente, você poderá limpar o histórico apertando o botão “limpar”.

5 Likes

Olá! :grin:

ESLint- verifica os erros que possam existir no nosso código Javascript.

2 Likes

SITES ÚTEIS

PALETAS DE CORES
Paletton
Adobe
Coolors

DEGRADÊ EM CSS
CSS Gradient

FONTES PARA WEB
Google Fonts
Adobe Fonts
CSS Fonts

FONTE FINDER (encontra a fonte usada em imagens)
What Fonts Is
Font Squirrel
My Fonts

FORMAS COM CSS
9elements

TESTE DE CONTRASTE
Color Contrast

PRÉ-VISUALIZADOR DE BUSCA GOOGLE
Portent

AUDITORIA DE SITES
SemRush

TUDO (OU QUASE) SOBRE CSS
CSS Tricks

CÓDIGOS PRONTOS PARA ANIMAÇÕES
Animista

4 Likes

Eu gosto bastante dessa extensão do VSCode:
PX TO REM

Com essa extensão, é possível transformar qualquer valor pixel em rem usando apenas um atalho do teclado, e ainda dá para escolher qual o valor base do rem.
Exemplo: Uma linha de código que tenha 16px; basta clicar no número e usar o atalho alt+z que ele transformaria em 1rem.

3 Likes

Galera,

uma que eu aprendi em um curso da Udemy foi a extensão Pesticide para Google Chrome.
Essa extensão te dá oportunidade para ver as Bordas de todos os Elementos, podendo assim se basear melhor na construção do seu site. as bordas mudam dependendo do Display ou outros códigos utilizados.

Pesticide for Chrome

3 Likes

Tem uma extensão do Chrome também muito legal para ver as linguagens, tecnologias, frameworks etc usados no site.

Wappalyzer

2 Likes

Não conhecia essa extensão, já baixei e achei mega útil!!!
Obrigado por compartilhar!

2 Likes