Jump to content

Danilo Duarte Ribeiro

Pessoal da TecnoSpeed
 Ver Perfil  Ver atividades

  • Contagem de Conteúdo

    19

  • Ingressou

  • Última visita

  • Dias Ganhos

    3

 Tipo de Conteúdo 

Postagens postado por Danilo Duarte Ribeiro

    Diferença de saída entre console.log(obj) e console.log(`${obj}`)

    em JavaScript

    Postado

    Olá, Marcelo! Não sei se entendi corretamente, mas você pegar um valor que está dentro do objeto `response`, certo?
    Se esse for o caso, você pode usar a notação de ponto para obter níveis inferiores do objeto juntamente com a notação de index para obter o primeiro elemente do array.

    Por exemplo, sendo o objeto `response` : 

    {
  "consultarResultado": [
    {
      "codigoLojaForn": "23VJ7I00MARCELLO",
      "cpfCnpjForn": "XXXXXXXXXXXX"
    }
  ]
}

    É possível obter o valor de `cpfCnpjForn` usando `response.consultarResultado[0].cpfCnpjForn`.

    Observe o uso do `[0]` para obter o primeiro (e único) elemente dentro do array `consultarResultado`.

    • Amei 1

    Números repetidos Array.

    em JavaScript

    Postado

    Olá!

    No caso, há duas interpretações pro seu problema...

     

    1 - Você deseja remover todos os elementos repetidos , caso não haja nenhum repetido retornar array vazio? Ex: [1, 2, 1, 4, 5, 4] retorna [2, 5]; e [1, 2, 3] retorna [] 

    const array = [1, 2, 3, 4, 5, 6];

function removerRepetidos(array) {
  let novoArray = [];
  novoArray = array.filter((value) => {
    if (array.indexOf(value) === array.lastIndexOf(value)) {
      return value;
    } else {
      return 0;
    }
  });

  if (novoArray.length === array.length) {
    return [];
  } else {
    return novoArray;
  }
}
const resultado = removerRepetidos(array);

console.log(resultado);

    Nesse caso, para fazer as duas verificações, abstrai a lógica para uma função.

    A primeira parte (filter e if) verifica os elementos repetidos e os remove, conforme o seu próprio código.

    Já a segunda parte (if (novoArray.length === array.length)) verifica o comprimento do array original e do novo. Se foram iguais, significa que não há elementos repetidos, e retorna um array vazio. Caso contrário, retorna o novo array sem os elementos repetidos.

     

    ---

     

    2 - Ou você deseja remover apenas as repetições que ocorrem, e ainda retornar array vazio caso não haja nenhum repetido? Ex: [1, 2, 1, 4, 5, 4] retorna [1, 2, 4, 5]; e [1, 2, 3] retorna [] 

    const array = [1, 2, 1, 4, 5, 4];

function removerRepetidos(array) {
  let novoArray = [];
  novoArray = Array.from(new Set(array));

  if (novoArray.length === array.length) {
    return [];
  } else {
    return novoArray;
  }
}
const resultado = removerRepetidos(array);

console.log(resultado);

    A diferença aqui é a parte da remoção de elementos repetidos. O anterior remove todos os elementos que possuam repetições, já este aqui remove apenas as repetições, mantendo os originais.

    O método new Set cria uma coleção de elementos únicos, o que remove os repetidos. Após isso, é cercado por um Array.from (perceba que é com A maiúsculo), um método nativo do JavaScript para converter em array.

    Ou seja, uma coleção de elementos únicos é criada com base no array recebido e, logo após, a coleção é convertida novamente em array.

    A verificação para retornar array vazio caso não haja repetições se mantém igual.

     

    Espero ter ajudado 🙂

    • Amei 2

    5 extensões úteis para o seu VS Code

    em Desenvolvimento de Software

    Postado

    Se você é um dev que usa o VS Code, são grandes as chances de você ter várias extensões instaladas, afinal, qual o dev que não gosta de extensões no VS Code? 🤣

    O tão conhecido editor de texto (talvez também uma IDE?) Visual Studio Code, da Microsoft, segundo a última pesquisa do Stack Overflow, domina sua categoria com quase 75% do mercado. E esse percentual não é à toa: apesar de ser criticado por ser um web app feito em Electron, o VS Code é um ótima solução tanto para desenvolvedores novos quanto para os experientes.

    Mas sempre dá pra melhorar, não é verdade? 👀

    image3.png

    Aqui vão 5 dicas de extensões para dar um boost no seu VS Code.

     

    1. Wrap Console Log

    A primeira extensão é para o dev de JavaScript e TypeScript de plantão que adoram usar o famoso `console.log` para debugar o código.

    Essa extensão associa um atalho no teclado para logar uma variável de maneira fácil e rápida.

    Basta selecionar o que você quer logar e apertar `Ctrl+Alt+W` + `W`.

    image1.gif

    Também há outras combinações de teclas que podem ajudar e é possível mudar todas elas da forma que preferir.

     

    2. Reload

    Uma extensão simples que adiciona um botão de recarregar na barra de status do seu VS Code, útil para quando algumas alterações exigem que ele seja reiniciado.

    image5.png

     

    3. Code Spell Checker

    Você é do tipo que às vezes comete erros de digitação e gasta algum tempo procurando onde errou? Essa extensão promete te ajudar com isso.

    Ela funciona como um corretor ortográfico parecido com o do Microsoft Word, destacando palavras escritas errado e sugerindo alternativas.

    Também é possível baixar dicionários de outros idiomas incluindo Português.

    suggestions.gif

     

    4. Duplicate action

    Já precisou duplicar um arquivo e desejou que tivesse um botão “duplicar” ao invés de ter que copiar e colar? É um pequeno detalhe que essa extensão resolve.

    Ela adiciona esse botão no menu de contexto ao clicar com o botão direito sobre uma pasta ou arquivo no VS Code.

    image2.png

     

    5. Colorize

    Uma forma simples de visualizar cores em arquivos de estilo como CSS, Sass, Less, etc.

    image.png

     

    BÔNUS: Paste JSON as Code

    Uma extensão bem útil para criar interfaces e tipagens com base em JSONs. Pasta copiar o JSON, executar a extensão, digitar o nome que deseja para a interface ou tipo, e escolher a linguagem que deseja, podendo ser TypeScript, Python, Go, Ruby, C#, Java, etc.

    É bom sempre dar uma conferida pois nem sempre é perfeito, mas ajuda muito especialmente se o JSON for muito grande.

    image4 (1) (3).gif

     

    O que achou dessas extensões? Qual você gostou mais? Você tem uma extensão favorita? Conte pra gente nos comentários. 😁

     

    • Curtir 6
    • Amei 2

    Extensões úteis para se usar no seu navegador

    em Troca de Conhecimentos Gerais

    Postado

    E aí pessoal! Tudo bem?

    Segue uma lista de extensões muito úteis pro seu navegador que eu e mais alguns colegas utilizamos por aqui 😄

    Dark Reader
    Utiliza diversas técnicas avançadas para converter sites em tema escuro de forma elegante.
    Disponível para Chrome, Edge, Firefox e Safari

    I don't care about cookies
    Pare de ver aqueles botões para aceitar os cookies, aceitando por padrão (no Firefox que isola os cookies por domínio isso não é algo grave).
    Disponível para Chrome, Edge, Firefox, Safari e Opera

    uBlock Origin
    Melhor bloqueador de propagandas (e trackers/rastreadores, não precisando do Disconnect por exemplo). Excelente alternativa ao Adblock Plus (ABP).
    Disponível para Chrome, Edge, Firefox, Safari e Opera

    Vimium
    Navegue pelos sites sem precisar do mouse, leia a overview para aprender os atalhos de teclado (que são baseados no editor de texto Vim).
    Disponível apenas para Chrome

    Wappalyzer - Technology profiler
    Identifica tecnologias utilizadas em praticamente qualquer site, desde framework web, ferramentas de web analytics, servidor de hospedagem, e muito mais.
    Disponível para Chrome, Edge, Firefox, Safari, etc

    Google Meet Auto Disable Mic/Cam
    Você tem costume de sempre fechar o mic e a câmera antes de entrar em reuniões no Meet? Essa extensão faz isso automaticamente 😝
    Disponível apenas para Chrome

    ColorZilla
    Ferramenta para analisar cores em qualquer site, obter seu hexadecimal, gerar gradientes, etc.
    Disponível para Chrome e Firefox

    Blackbox - Select. Copy. Paste & Search
    Copie o texto de imagens, vídeo e muito mais! 😎
    Disponível para Chrome, Edge, Firefox, Safari, etc

    Vue.js Devtools
    Extensão indispensável para quem desenvolve com Vue.js. Uma ótima alternativa pra evitar debugar com console.log() 👀
    Disponível para Chrome e Firefox

     

    O que achou? Tem mais alguma extensão legal você usa? Compartilhe com a gente nos comentários! 😄

    • Curtir 6

    Gostaria de tirar uma dúvida sobre css no html (usando no VS Code)

    em HTML & CSS

    Postado

    Por padrão, os elementos são posicionados um abaixo do outro. Se vc utilizar a propriedade  

    display: flex;

    na div pai, ou seja, que envolve o título e as logos, os elementos passam a ficar um ao lado do outro, conforme abaixo.

    image.png

    Talvez também seja necessário utilizar width como 100% nessa div também.

    Daí para alinhar no eixo vertical, conforme a imagem abaixo, utilize  

    align-items: center;

    image.png

    e para deixar os elementos filhos alinhados na horizontal de forma que se espalhem de cada canto, conforme a imagem abaixo, você pode utilizar 

    justify-content: space-between;

    ou alguma das outras opções a seguir.

    image.png

    Se ainda tiver dúvidas, procure sobre flexbox no CSS.

    Espero ter ajudado 🙂

    Como agilizar o processo de estilização do seu aplicativo web com o Tailwind CSS

    em Desenvolvimento de Software

    Postado

    Frameworks CSS

    Durante o desenvolvimento de aplicações web,  independente do framework ou biblioteca utilizado, a estilização é, para muitos, uma das etapas mais trabalhosas e complicadas de se fazer, devido ao famoso CSS, que é amado por alguns e odiado por outros. Gostando ou não de escrever CSS, a verdade é que é necessário investir um tempo considerável do desenvolvimento a fim de obter o resultado desejado para o visual da aplicação.

    Com esse problema em mente, diversos desenvolvedores e designers construíram diversas ferramentas e frameworks para auxiliar nesse processo como, por exemplo, o Bootstrap,  que é (provavelmente) o mais conhecido e utilizado de todos. A maioria desses frameworks funcionam por meio das classes HTML e realizam a estilização do elemento em questão de acordo com a classe inserida.

    A maior desvantagem desse tipo de framework é que grande parte deles são, na realidade, uma coleção de componentes prontos que mudam a estilização completa de um elemento com apenas uma classe e, muitas vezes, não possuem simples maneiras de customizá-lo diretamente, o que faz com que os desenvolvedores ainda tenham que escrever um código CSS adicional caso queiram mudar parte do design de um componente e torná-lo diferente do padrão.

     

    Há quem goste dessa abordagem, contudo, eu gostaria de mostrar uma outra abordagem de frameworks CSS, denominada “utility-first”, que, na prática utilizam classes para estilizar propriedades específicas de um elemento e não mudam o estilo dele por inteiro de uma única vez.

    Essa abordagem é ótima para quem não quer perder a liberdade de estilizar cada aspecto de um elemento individualmente, e também não deseja ter uma interface semelhante a várias outras, como acontece na maioria das interfaces que usam Bootstrap, por exemplo.

    E dentre os frameworks que utilizam essa abordagem, gostaria de destacar um deles em específico: o Tailwind CSS.
     

    Tailwind CSS

    O Tailwind CSS é um framework CSS utility-first e mobile-first que vem se destacando por ser simples, leve, responsivo, amplamente configurável e extremamente fácil de usar até para quem não domina CSS.

    Atualmente ele está disponível para diversos frameworks e bibliotecas como: React, Vue.js, Next.js, Nuxt.js, Vite, Laravel, Gatsby, e até para projetos com JavaScript puro, e seu processo de instalação é bem simples.

    Uma vez instalado, basta escrever as classes correspondentes às propriedades CSS desejadas no “class” (ou “className”, no React) do elemento em questão, seguindo as classes da documentação oficial, e o estilo será aplicado a ele instantaneamente.

    Outra vantagem é que o Tailwind CSS realiza o “purge” de classes, ou seja, classes não utilizadas não são incluídas no build da aplicação, reduzindo o tamanho dos arquivos finais e melhorando a performance.

    É possível testar o Tailwind CSS por meio do link: https://play.tailwindcss.com/

     

    A seguir seguem alguns exemplos práticos da utilização do Tailwind CSS em comparação com CSS puro.

     

    1 - Flexbox:

    • HTML e CSS puro 
    <div class="element">
    ...
</div>
    .element {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

     

    • Utilizando Tailwind CSS 
    <div class="flex flex-col items-center justify-center">
    ...
</div>

     

    2 - Grid, quebra de linha e text-overflow:

    • HTML e CSS puro 
    <div class="container">
    <div class="first">
        ...
    </div>
    <div class="second">
        ...
    </div>
</div>
    .container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.first {
  grid-column: span 3 / span 3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.second {
  grid-column: span 1 / span 1;
}

     

    • Utilizando Tailwind CSS 
    <div class="grid grid-cols-4">
    <div class="col-span-3 truncate">
        ...
    </div>
    <div class="col-span-1">
        ...
    </div>
</div>

     

    3 - Responsividade, cores, padding e border-radius:

    • HTML e CSS puro 
    <div class="element">
    ...
</div>
    .element {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 1rem;
  background-color: #2563eb;
  color: #4b5563;
  border-radius: 0.5rem;

  @media (min-width: 768px) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

     

    • Utilizando Tailwind CSS 
    <div
  class="
    w-full
    flex flex-col
    items-center
    justify-center
    gap-8
    p-4
    bg-blue-600
    text-gray-600
    rounded-lg
    md:grid md:grid-cols-4
  "
>
    ...
</div>


    Conclusão:

    Por fim, espero que tenha sido possível perceber as diversas vantagens na utilização do Tailwind CSS em seu projeto front-end e que, embora não seja perfeito, ele pode proporcionar um grande aumento na produtividade de desenvolvedores front-end, reduzindo o tempo gasto em estilização, especialmente para aqueles que são muito fãs de escrever CSS.

    Existem também diversas outras ferramentas para melhorar a forma de lidar com estilização, como Styled Components, Sass, dentre outros.

    Qual o seu favorito?

    O que achou do Tailwind CSS?

    Gostaria de unir o Tailwind CSS com uma biblioteca de componentes como o Bootstrap? Dê uma olhada no Tailwind UI. 😄

    • Curtir 5
    • Amei 1
×
×
  • Create New...