DEV Community: Tássio Medeiros

10 Dicas para Pesquisar no Google como um Desenvolvedor Profissional

Tássio Medeiros — Fri, 02 Aug 2024 01:03:11 +0000

O Google domina mais de 90% das pesquisas na web globalmente e processa mais de 3,5 bilhões de consultas diariamente. No entanto, poucos sabem como pesquisar de maneira eficaz para obter resultados precisos. Para desenvolvedores, em particular, o Google é uma ferramenta indispensável, pois não conseguimos memorizar todas as sintaxes e algoritmos como máquinas. Portanto, é crucial, especialmente para profissionais de TI, saber como utilizar o Google de forma eficiente. Abaixo estão algumas dicas e atalhos que podem ajudar a obter respostas mais precisas.

1. Use Aspas

Uma forma de filtrar e receber resultados de forma mais certeira é usar as aspas. Isso é especialmente útil para pesquisar erros específicos no Google. Por exemplo, se você busca por uma mensagem de erro exata, colocar a frase entre aspas garante que o Google procure exatamente aquele texto.

2. Use Asteriscos

Os asteriscos funcionam como curingas e podem substituir palavras desconhecidas em uma frase. Isso é muito útil para desenvolvedores ao lidar com erros genéricos. Por exemplo, ao pesquisar por "TypeError: Cannot read property '*' of undefined", você encontrará todas as ocorrências desse tipo de erro, independentemente do nome da propriedade desconhecida.

3. Use o Hífen

Para eliminar assuntos indesejados e tornar a pesquisa mais clara, utilize o hífen. Isso é útil quando você deseja excluir resultados que contenham determinados termos. Por exemplo, "javascript desestruturação -array" irá excluir resultados relacionados ao Angular.

4. Tipo de Arquivo

Esse atalho é útil quando precisamos de um arquivo específico, como um PDF. Basta usar "filetype:[formato de arquivo]" seguido do nome do arquivo. Por exemplo, "filetype

“What Developers Search For and What They Find" irá buscar os documento especificado em PDF.

5. Use After/Before

Os operadores "after" e "before" são ótimos para filtrar resultados por data. Use "after:[data]" para encontrar resultados publicados depois de uma data específica e "before:[data]" para resultados anteriores à data especificada. Por exemplo, "react router before:2020" mostrará tudo sobre React Router antes de 2020.

No exemplo abaixo, "react router after:2020" mostrará frameworks lançados após 2020.

6. Use Define

Para obter rapidamente a definição de um termo, use "define:". Isso é útil para termos técnicos que você não conhece. Por exemplo, "define" mostrará a definição de API diretamente nos resultados da pesquisa.

7. Série de Números

Para pesquisar algo relacionado a datas ou intervalos de números, use "..". Por exemplo, "react versions 2017..2023" mostrará resultados sobre versões do React lançadas entre 2017 e 2023. Isso é muito útil para quem trabalha com estatísticas e finanças.

8. Pesquise em um Site Específico

Para encontrar informações dentro de um site específico, use "site:[url]". Por exemplo, "site.org API reference" buscará referências de API no site do Next.js. Isso é útil quando você lembra vagamente onde leu algo, mas não o local exato.

9. Operadores OR e AND

Os operadores OR e AND ajudam a filtrar resultados relacionados a múltiplos termos. O OR (ou |) busca resultados que contenham pelo menos um dos termos, enquanto o AND busca resultados que contenham ambos. Por exemplo, "javascript | typescript" encontrará resultados que mencionem um dos dois.

No exemplo abaico com o uso do AND em "javascript AND typescript" encontrará resultados que mencionem ambos.

10. Use o Google como Calculadora

Você pode usar a barra de pesquisa do Google como uma calculadora. Basta digitar o cálculo que você precisa e o Google irá resolver para você. Por exemplo, "5*7/2” mostrará o resultado diretamente.

Artigos Recomendados

Abaixo estão alguns artigos que estudei para poder escrever este artigo, neles há mais exemplos de atalhos de pesquisa que poderão te ajudar a aprimorar suas habilidades de pesquisa no Google. Boa sorte e ótimos estudos! 🚀

Você já conhecia algum dos atalhos acima? Conhece algum que não está no artigo? Compartilhe comigo suas ideias! Feedbacks são sempre bem-vindos. Até mais, coders! 👨‍💻👩‍💻

Desestruturação com Javascript

Tássio Medeiros — Thu, 06 Jun 2024 23:38:09 +0000

Olá coders! 😁 Hoje eu vou falar um pouco sobre desestruturação em javascript, espero que gostem do que vem a seguir. Este é um artigo bem básico para quem quer relembrar ou visualizar rapidamente o conceito, nada muito aprofundado.

A desestruturação é um recurso que foi adicionado no Javascript ES6, como o próprio nome diz, ela permite desestruturar algo, de forma mais simples, retirando o que precisamos, ou “desembalando”. Podemos usa-la para remover elementos de arrays e objetos, de forma bem direta. É uma ótima opção para deixar o código limpo e enxuto. Ao decorrer do texto, vamos entender alguns tipos de desestruturação.

Desestruturação Aninhada

const Cachorro = {
  nome: 'Bob',
  raca: 'Vira-lara',
  idade: 5,
  dono: {
      nomeDono: 'Tássio',
      idadeDono: 26,
      endereco: {
          rua: 'Rua Daora',
          numero: 234,
      }
  }
}

// Acessando os valores:
const idade = Cachorro.idade //5
const dono = Cachorro.dono.nomeDono // 'Tássio'
const idade = Cachorro.dono.endereco.rua // 'Rua Daora'

Observe o exemplo acima. É um objeto Cachorro e é com ele que vamos trabalhar ao longo do artigo. Veja que, para acessar os valores, é necessário replicar Cachorro. várias vezes .

const {
  nome,
  raca,
  idade,
  dono: {
    nomeDono,
    idadeDono,
    endereco: { rua, numero }
  }
} = Cachorro;

// A desestruturação acima é equivalente a:
const nome = 'Bob';
const raca = 'Vira-lata';
const idade = 5;
const nomeDono = 'Tássio';
const idadeDono = 26;
const rua = 'Rua Daora';
const numero = 234;

Agora, com a aplicação da desestruturação, o processo é menos trabalhoso. As propriedades do objeto já são transformadas em variáveis diretamente, sem precisar usar Cachorro. repetidamente. Esse tipo de desestruturação é conhecida como aninhada pois lida com objetos ou arrays que contêm outros objetos ou arrays internos. Para extrair as propriedades é necessário “mergulhar”(ou “aninhar”) na estrutura.

Desestruturação com Alias

const {
  nome: nomeCachorro,
  raca: racaCachorro,
  idade: idadeCachorro,
  dono: {
    nomeDono: nomeProprietario,
    idadeDono: idadeProprietario,
    endereco: { rua: ruaDono, numero: numeroCasa }
  }
} = Cachorro;

// A desestruturação acima é equivalente a:
const nomeCachorro = 'Bob';
const racaCachorro = 'Vira-lata';
const idadeCachorro = 5;
const nomeProprietario = 'Tássio';
const idadeProprietario = 26;
const ruaDono = 'Rua Daora';
const numeroCasa = 234;

No código acima as variáveis foram renomeadas, mas os valores permanecem os mesmos. Essa é a desestruturação alias, bastante necessária quando queremos evitar conflitos de nomes no nosso projeto ou quando precisamos que nossas variáveis tenham nomes mais significativos que se encaixem com o contexto.

Observe que nomeCachorro é uma nova variável que armazena o valor da propriedade nome do objeto Cachorro. É importante ressaltar que nomeCachorro não altera nem substitui a propriedade nome no objeto Cachorro. A desestruturação cria novas variáveis (com nomes diferentes) para os valores das propriedades, mas o objeto original permanece inalterado.

Tenho falado aqui sobre a Desestruturação Alias, mas por que o nome é “Alias”? 🤔
Bem, se você for traduzir do inglês para o português, “alias” significa “apelido”, ou seja, estamos criando apelidos para as propriedas do objeto.

Desestruturação Rest/Spread

Rest (`...`)

const { nome, raca, ...resto } = Cachorro;

// A desestruturação acima é equivalente a:
const nome = 'Bob';
const raca = 'Vira-lata';
const resto = {
  idade: 5,
  dono: {
    nomeDono: 'Tássio',
    idadeDono: 26,
    endereco: {
      rua: 'Rua Daora',
      numero: 234
    }
  }
};

No exemplo acima nome e raca foram desestruturados e armazenados em variáveis separadas, já resto é um novo objeto que contém todas as outras propriedades do objeto Cachorro. É isso que o operador rest permite fazer: capturar o resto das propriedas de um objeto ou elementos de um array que não foram desestruturados.

Abaixo um exemplo com array:

const numeracao = [1, 10, 100, 1000, 10000];

const [unidade, dezena, ...resto] = numeracao;

console.log(unidade); // 1
console.log(dezena); // 10
console.log(resto); // [100, 1000, 10000]

Em unidade e dezena pegamos dois primeiros elementos do array numeracao, e o resto é um novo array que contém todos os elementos restantes.

Spread (`...`)

O operador spread (...) usa o mesmo sinal que o operador rest, mas é usado de maneira diferente. Enquanto o operador rest coleta elementos ou propriedades restantes, o operador spread expande um objeto ou array. Isso é especialmente útil para copiar e combinar objetos e arrays.

Exemplo com Objeto:

const outroDono = { nomeDono: 'Pedro', idadeDono: 30 };
const cachorroComOutroDono = { ...Cachorro, dono: outroDono };

console.log(cachorroComOutroDono);
// { nome: 'Bob', raca: 'Vira-lata', idade: 5, dono: { nomeDono: 'Pedro', idadeDono: 30 } }

No exemplo acima:

O objeto Cachorro é copiado usando o operador spread (...Cachorro), criando uma nova instância com todas as propriedades do objeto original.
O novo objeto cachorroComOutroDono é então combinado com o objeto outroDono, onde a propriedade dono do objeto Cachorro é substituída pela propriedade dono do objeto outroDono.

Exemplo com array:

const vogais = [a, e, i];
const consoantes = [b, c, d];
const letras = [...vogais, ...consoantes];

console.log(letras); // [a, e, i, b, c, d]

No exemplo acima o array vogais é expandido usando o operador spread (...vogais), e o mesmo é feito com o array consoantes . Ambos os arrays são combinados no novo array letras.

Função com Desestruturação

Com a desestruturação em funções você pode desestruturar objetos diretamente nos parâmetros da função. Isso torna a função mais legível e clara, principalmente quando você está lidando com objetos complexos.

function printCachorro({
  nome,
  raca,
  idade,
  dono: {
    nomeDono,
    idadeDono,
    endereco: { rua, numero }
  }
}) {
  console.log(`Nome do Cachorro: ${nome}`);
  console.log(`Raça: ${raca}`);
  console.log(`Idade: ${idade}`);
  console.log(`Nome do Dono: ${nomeDono}`);
  console.log(`Idade do Dono: ${idadeDono}`);
  console.log(`Rua: ${rua}`);
  console.log(`Número: ${numero}`);
}

printCachorro(Cachorro);

Observe que na função printCachorro, em vez de acessar Cachorro.nome, Cachorro.raca, etc., você pode acessar nome, raca, etc., diretamente nos parâmetros. A função define seu parâmetro como um objeto com uma estrutura que corresponde ao objeto Cachorro. Isso possibilita extrair todas as propriedades necessárias diretamente quando a função é chamada.

Além disso, também podem ser definidos valores padrão para o caso das propriedades não estarem presentes no objeto passado para a função.

function printCachorro({
  nome = 'Desconhecido',
  raca = 'Desconhecida',
  idade = 0,
  dono: {
    nomeDono = 'Sem nome',
    idadeDono = 0,
    endereco: { rua = 'Sem rua', numero = 0 } = {}
  } = {}
} = {}) {
  console.log(`Nome do Cachorro: ${nome}`);
  console.log(`Raça: ${raca}`);
  console.log(`Idade: ${idade}`);
  console.log(`Nome do Dono: ${nomeDono}`);
  console.log(`Idade do Dono: ${idadeDono}`);
  console.log(`Rua: ${rua}`);
  console.log(`Número: ${numero}`);
}

printCachorro({});

No exemplo acima, mesmo se o objeto passado para a função estiver vazio ou faltar alguma propriedade, a função ainda funcionará corretamente por conta dos valores padrão.

Espero que este artigo tenha sido útil para você entender entender um pouco mais sobre a desestruturação em Javascript. Lembre-se de que utilizando da maneira correta, esse método pode agregar bastante no resultado final do seu trabalho.

Se você tiver algo a recomendar, feedbacks e etc., sinta-se à vontade para compartilhá-los nos comentários! Até logo, te vejo no próximo artigo!🖖🏽😄

10 Extensões úteis para o seu VSCode

Tássio Medeiros — Wed, 15 May 2024 13:39:41 +0000

O Visual Studio Code, ou VS Code, é um dos IDE’s (Ambiente de Desenvolvimento Integrado) mais populares atualmente devido sua interface amigável e sua extensibilidade por meio de extensões. No entanto, com a imensa gama de extensões disponíveis, pode ser desafiador encontrar aquelas que melhor atendem às suas necessidades específicas. Neste artigo, vamos conhecer dez extensões úteis que podem elevar sua experiência. Seja você um desenvolvedor front-end, back-end ou full-stack, estas extensões foram selecionadas para aumentar sua produtividade e melhorar a qualidade do código. Vamos mergulhar e descobrir como essas ferramentas podem transformar sua experiência de desenvolvimento no VS Code.

Material Icon Theme

O Material Icon Theme personaliza os ícones do seu VSCode de acordo com a linguagem que você está utilizando. É uma ótima ferramenta que agiliza o seu trabalho. Imagina o seguinte, você precisa rapidamente identificar um arquivo de linguagem específico e ele já está lá facilmente visível. Além disso, a extensão também customiza os ícone de suas pastas.

Color Highlight

A extensão Color HighLight possibilita a visualização das cores hexadecimais dentro do VSCode. Uma maneira fácil de identificar a cor necessária no momento.

SVG Previewer

A extensão SVG Previewer facilita a pré-visualização de uma arquivo SVG dentro do seu VSCode. Mais uma maneira de identificação rápida dos seus arquivos, agora de imagem.

Live Server

O Live Server é uma mão na roda para desenvolvedores Front-end, ela permite visualizar as alterações do seu código em tempo real. A grande vantagem é que o Live Server automatiza a atualização da página no navegador para você através de um localhost.

A página no navegador é recarregada automaticamente sempre que ocorre uma alteração nos arquivos do projeto, economizando tempo e tornando o processo de desenvolvimento mais eficiente.
Permite o uso de recursos do HTML5, como WebSockets e Geolocation, facilitando o desenvolvimento de aplicações web modernas.
A extensão é altamente configurável, permitindo que os usuários ajustem as configurações de acordo com suas necessidades específicas de projeto.

Git Lens

O Git Lens é uma extensão que integra as funcionalidade do Git diretamende no VSCode. Essa é uma ferramenta poderosa quando se trata de produtividade e agilidade. Algumas das funcionalidades dela:

Com o GitLens é possível explorar rapidamente o histórico de um repositório, incluindo branches, tags e commits.
GitLens você pode visualizar de forma detalhada o histórico de alterações de um arquivo, sendo possível saber quem e quando fez alterações específicas em um projeto.
Você pode comparar facilmente diferentes revisões de um arquivo para ver as alterações entre elas e entender como o código evoluiu ao longo do tempo.

ES Lint

O ES Lint é um linter bastante utilizado pela comunidade do Javascript e Typescript. Esta extensão ajuda a identificar erros de sintaxe e problemas de estilo no código JavaScript, ajudando os desenvolvedores a manter um código limpo e legível. Além disso, pode ser facilmente configurado para atender às necessidades do seu projeto, tudo através de um arquivo de configuração simples.

Na imagem abaixo é possível observar a ferramenta indicando erros de código em javascript:

Github Copilot

O Github Copilot é uma extensão que você pode usar como uma assistente ou um parceiro de programação. Esta ferramenta desenvolvida pelo Github e pela Open AI pode gera sugestões de código com base no que você está escrevendo. É uma ótima opção quando você lida com tarefas repetitivas. Abaixo algumas vantagens:

GitHub Copilot é alimentado por modelos de linguagem treinados em uma grande quantidade de código-fonte de código aberto. Isso significa que ele está constantemente aprendendo com novos padrões de codificação e soluções para problemas comuns, tornando suas sugestões cada vez mais precisas e úteis ao longo do tempo.
Embora inicialmente tenha sido lançado com suporte principalmente para Python e JavaScript, o GitHub Copilot está expandindo seu suporte para uma variedade de linguagens de programação, o que o torna útil para uma ampla gama de desenvolvedores.

Markdown All in One

Escrever um código limpo e que funcionen bem é essencial. Mas além disso, um bom programador ganha bons pontos aos escrever um README que seja visualmente bem construído e que explique bem o seu projeto. Neste contexto, a extensão Markdown All in One se encaixa como uma ótima ferramenta. Usando-a você pode editar e visualizar seu documento Markdown no próprio Visual Studio Code, sem a necessidade de alternar entre diferentes aplicativos ou janelas.

Abaixo algumas de suas principais vantagens:

A extensão Markdown All In One oferece recursos de previsão para Markdown, o que significa que ela pode sugerir automaticamente elementos Markdown enquanto você digita, economizando tempo e esforço na digitação.
A extensão facilita a criação de tabelas Markdown e a inserção de emojis, simplificando a formatação e tornando o documento mais visualmente atraente.

NPM IntelliSense

Mais uma extensão voltada para produtividade que pode agregar muito é a NPM IntelliSense. Com esta ferramenta você obtém autocompletar para nomes de pacotes npm diretamente no editor. Isso economiza tempo e ajuda a evitar erros de digitação ao instalar ou importar pacotes em seu projeto.

Além disso, outras 3 vantagens:

A extensão fornece informações sobre as versões disponíveis dos pacotes npm, o que pode ajudar a garantir que você esteja instalando a versão mais recente ou apropriada para o seu projeto.
Se você estiver usando aliases de importação em seu projeto (por exemplo, import MyComponent from '@/components/MyComponent'), o npm IntelliSense pode reconhecê-los e oferecer autocompletar para esses caminhos personalizados.
A extensão oferece suporte para completar scripts npm e outras configurações diretamente no arquivo package.json, facilitando a edição e a manutenção desse arquivo crucial.

JavaScript (ES6) code snippets

A extensão JavaScript (ES6) code snippets mais uma ferramenta aliada da produtividade. Com ela você tem disponível snippets de código para Javascript que podem te ajudar a poupar tempo.

Na tabela abaixo alguns exemplos de atalhos para métodos do javascript:

Atalho	Descrição	Exemplo
fre	Loop forEach em sintaxe ES6	array.forEach(currentItem => {})
anfn	Cria uma função anônima	(params) => {}
sto	Método auxiliar setTimeout	setTimeout(() => {});
prom	Cria uma nova Promise	return new Promise((resolve, reject) => {})
thenc	Adiciona declarações then e catch a uma Promise	then((res) => {}).catch((err) => {})

Mais algumas vantagens dessa extensão:

Os snippets fornecidos pela extensão são especialmente úteis para JavaScript moderno, como ES6 e versões posteriores, incluindo recursos como arrow functions, template literals, destructuring, spread/rest operators, classes, async/await, entre outros.
Ao utilizar os snippets fornecidos pela extensão, você garante que seu código siga padrões consistentes e modernos de codificação JavaScript, o que pode melhorar a legibilidade e a manutenibilidade do código.
Ao explorar os snippets fornecidos pela extensão, os desenvolvedores podem aprender novos recursos e sintaxes do JavaScript moderno. Isso é especialmente útil para desenvolvedores que estão se familiarizando com ES6 e versões posteriores.

Na tabela abaixo estão alguns métodos de console:

Atalho	Descrição	Exemplo
cas→	Exibe uma mensagem de alerta no console	console.assert(expression, object)
ccl-	Limpa o console	console.clear()
cnb	Conta o número de vezes que um determinado rótulo foi usado	console.count(label)
cdb	Exibe uma mensagem de depuração no console	console.debug(object)
cdi-	Exibe as propriedades de um objeto no console	console.dir(object)

Espero que este artigo tenha sido útil para você descobrir novas extensões que podem aprimorar sua experiência de desenvolvimento. Lembre-se de que a escolha das extensões certas pode fazer uma grande diferença em sua produtividade e no resultado final do seu trabalho.

Se você tiver alguma extensão favorita que não foi mencionada aqui, sinta-se à vontade para compartilhá-la nos comentários! Até logo e happy coding! 😄