Jump to content

Danilo Duarte Ribeiro

Pessoal da TecnoSpeed
  • Contagem de Conteúdo

    21
  • Ingressou

  • Última visita

  • Dias Ganhos

    4

Danilo Duarte Ribeiro ganhou o dia em Junho 20

Danilo Duarte Ribeiro teve o conteúdo mais curtido!

Informações Pessoais

  • Cidade
    Volta Redonda
  • Estado
    Rio de Janeiro (RJ)

Clientes & Parceiros

  • Você é um cliente TecnoSpeed?
    Não
  • Você é um parceiro da Casa do Desenvolvedor?
    Sim

Visitantes Recentes do Perfil

489 visualizações do perfil

Conquistas de Danilo Duarte Ribeiro

  1. Recentemente, me deparei com uma tarefa em que tive que executar um script JavaScript externo no Vue.js, pois o código em questão não possuia uma biblioteca no npm e, no HTML nativo, só funcionava chamando por tags <script>. Pois acontece que o Vue não lida muito bem com outros scripts no arquivo index.html, pois ele mesmo já se utiliza de um para funcionar. Com isso, tive que buscar uma forma alternativa de chamar o script apenas após a executação inicial do Vue. Para isso, utilizei a lib vue-plugin-load-script, e a executei apenas após o aplicativo ser iniciado e o usuário realizar o login. <script setup lang="ts"> // componente a ser executado somente após o load inicial da aplicação import { loadScript } from 'vue-plugin-load-script'; loadScript('https://script-teste.com').then(() => { // configuração adicional do script }); </script> Caso o script deva ser executado somente se uma condição for atendida, basta envolver toda a função loadScript em um if-else.
  2. Alguma vez você já teve que renderizar um HTML externo que você não tem controle? Se sim, você provavelmente sabe que, infelizmente, muitos problemas de segurança podem ocorrer devido a isso, especialmente se o HTML não for tratado da forma correta. Devido a isso, foi criado o processo de sanitização (ou higienização) de HTML, para que sejam renderizadas apenas as marcações consideradas seguras. Saiba mais sobre sanitização de HTML aqui. Recentemente, me deparei com uma situação em que era necessário renderizar um HTML vindo de uma API externa dentro de um iframe, e vou compartilhar com vocês como fiz para deixar esse HTML mais seguro e reduzir a probabilidade de brechas de segurança. Utilizando DOMPurify para Sanitizar HTML Uma biblioteca JavaScript bem simples que resolve o problema é a DOMPurify, que utilizei num projeto em Vue.js. Suponha que meu código problemático contenha o seguinte iframe: <iframe :srcdoc="html" /> OBS: A variável html passada para o iframe é o código HTML recebido pela API. Para implementar o DOMPurify, basta importá-lo e envolver o HTML com a função sanitize: <script setup> import { sanitize } from 'dompurify'; </script> <iframe :srcdoc="sanitize(html)" /> Simples assim! Preservando Estilos no HTML Sanitizado Se você deseja manter os estilos que o HTML possui, basta passar a prop FORCE_BODY como true: <script setup> import { sanitize } from 'dompurify'; </script> <iframe :srcdoc="sanitize(html, { FORCE_BODY: true })" /> Conclusão E é isso! Agora seu HTML está devidamente sanitizado e drasticamente mais seguro contra brechas de segurança!
  3. 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.
  4. 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?
  5. 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`.
  6. 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].
  7. 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
  8. 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 🙂
  9. Não tem jeito...Dracula é o melhor hehehe
  10. 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. 😁
  11. Bom dia, Jhoncy! Pode enviar o código do botão, por favor? Tanto o HTML quanto o CSS.
  12. 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/
  13. 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! 😄
  14. 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 🙂
  15. 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.
×
×
  • Create New...