Jump to content

Danilo Duarte Ribeiro

Pessoal da TecnoSpeed
  • Contagem de Conteúdo

    19
  • Ingressou

  • Última visita

  • Dias Ganhos

    3

Tudo que foi postado por Danilo Duarte Ribeiro

  1. O problema parece ser onde vc chama o CSS. Provavelmente no Head do seu HTML. Da uma olhada se não está apenas com HTTP e não HTTPS. A mensagem de erro é justamente sobre isso, não está deixando importar um conteúdo em HTTP para dentro de HTTPS.
  2. Boa tarde, Leonardo! Não consegui ler o que está escritos nas mensagens de erro. Se puder inserir uma imagem em melhor resolução, por gentileza. O site utiliza algum framework JS? Qual? Utiliza framework CSS? Qual? O site só quebrou depois que inseriu o botão?
  3. 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`.
  4. Olá! Acredito que a solução que esteja buscando seja a seguinte: console.log(`Passos 1, 2, 3`, ctx) Por padrão, objetos não podem ser misturados com strings a menos que sejam convertidos com JSON.stringfy. A solução acima exibe duas variáveis ao mesmo tempo, independente do tipo, separadas por vírgula; assim não ocorre o problema do [object Object].
  5. Bom dia! Está tendo algum erro específico? E qual versão do Angular está usando? Dá uma olhada nesse link, pode ser que ajude: https://l-lin.github.io/angular-datatables/#/welcome
  6. 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 🙂
  7. Não tem jeito...Dracula é o melhor hehehe
  8. 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? 👀 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`. 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. 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. 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. 5. Colorize Uma forma simples de visualizar cores em arquivos de estilo como CSS, Sass, Less, etc. 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. O que achou dessas extensões? Qual você gostou mais? Você tem uma extensão favorita? Conte pra gente nos comentários. 😁
  9. Bom dia, Jhoncy! Pode enviar o código do botão, por favor? Tanto o HTML quanto o CSS.
  10. Aí vai uma dica pra quem tem o email lotado de coisa inútil e não sabem por onde começar pra limpar 😆 https://unroll.me/
  11. 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! 😄
  12. 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. 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; 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. Se ainda tiver dúvidas, procure sobre flexbox no CSS. Espero ter ajudado 🙂
  13. Como está a estilização da div "logo"? Acredito que o problema possa ser nela ou na div "header-1". Tente usar display flex em uma delas. Uma ferramenta legal pra ver como está o layout no browser é usar o inspetor de elementos nas ferramentas de desenvolvedor.
  14. Olá, Alex! Qual o posicionamento desejado? Que ícones ficassem dentro da barra preta? Talvez o erro esteja no HTML, não no CSS. Se puder enviar também seu HTML.
  15. 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. 😄
  16. Vai de JavaScript, não tem erro. 😃 É uma linguagem versátil e dá pra fazer de tudo com ela.
×
×
  • Create New...