Pode ser complicado trabalhar com URLs porque eles podem ser mais complicados do que o formato tradicional de URL que o senhor digita. Lembrei-me disso novamente quando estava analisando URLs do Webpack e vi essa beleza:
webpack-internal:///../rbd/pnpm-volume/144384a5-85d9-4142-b9b9-168eea22eb97/node_modules/.registry.npmjs.org/fbjs/0.8.17/node_modules/fbjs/lib/isNode.js
Analisei o URL com new URL("....")
mas vi que o pathname
incluía todas as barras iniciais:
///../rbd/pnpm-volume/144384a5-85d9-4142-b9b9-168eea22eb97/node_modules/.registry.npmjs.org/fbjs/0.8.17/node_modules/fbjs/lib/isNode.js
Como eu queria exibir um nome de caminho correto, queria descobrir como remover/substituir caracteres repetidos com JavaScript. Na verdade, foi mais fácil do que eu imaginava:
const prettyPath = urlObj.pathname.replace(/\/{2,}/g, "/"); // > /../rbd/pnpm-volume/144384a5-85d9-4142-b9b9-168eea22eb97/node_modules/.registry.npmjs.org/fbjs/0.8.17/node_modules/fbjs/lib/isNode.js
O {2,}
da expressão regular permite apenas um dos caracteres repetidos, e o /g
garante que várias instâncias dentro da cadeia de caracteres terão o caractere repetido removido.
Quando pensei que já tinha visto de tudo, esse URL do Webpack me surpreendeu. Felizmente, um pequeno regex me permitiu mostrar um URL bonito na página para o usuário!
Servindo fontes da CDN
Para obter o máximo desempenho, todos sabemos que devemos colocar nossos ativos na CDN (outro domínio). Junto com esses ativos estão as fontes da Web personalizadas. Infelizmente, as fontes da Web personalizadas via CDN (ou qualquer solicitação de fonte entre domínios) não funcionam no Firefox ou no Internet Explorer (corretamente, por especificação)…
Tags META do Facebook Open Graph
Não é segredo que o Facebook se tornou um importante gerador de tráfego para todos os tipos de sites. Hoje em dia, até mesmo as grandes corporações direcionam os consumidores para suas páginas do Facebook, em vez de para os sites corporativos diretamente. E, é claro, há widgets “Curtir” e “Recomendar” do Facebook em todos os sites. Um…
Sobreposição de texto CSS
Uma das funções importantes do CSS é posicionar elementos…
Margin
,padding
,top
,left
,right
,bottom
,position
, ez-index
são apenas alguns dos principais atores no posicionamento CSS. Ao usar o espaçamento acima…