Notas de front end nº 1

Neste artigo, você encontrará algumas pequenas notas de frontend. Às vezes, eles serão curtos porque o tópico é totalmente revelado em algumas frases, e às vezes porque o autor não tem experiência e conhecimento suficientes para revelá-los de forma mais completa. Se gostar, escreverei cada vez mais detalhadamente, com links e pesquisas.



A ideia de escrever um artigo surgiu ao reler a correspondência com um amigo, um chefe de equipa, um front-end (Lyokha, olá!), Que sempre partilha generosamente os seus conhecimentos, ideias e problemas comigo.



Tudo o que está escrito é a opinião pessoal de um pequeno grupo de pessoas e dificilmente finge ser verdade. Vamos começar.

Tente não usar transição: tudo

Muitas pessoas sabem disso, mas recentemente me deparei com outro motivo pelo qual você deve ser extremamente cuidadoso ao usar o valor all com a propriedade de transição.



Vamos imaginar que temos um contêiner com uma propriedade de transição:

.content{
  color: red;
  transition: 1s;
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Ao passar o mouse, a cor muda:

.content:hover {
  color: blue;
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Se embrulharmos neste contêiner, por exemplo, svg, a propriedade fill será igual a currentColor , então, ao passar o mouse, a luz da imagem mudará. Mas e se especificássemos essa propriedade em algum lugar para todos os svg?

svg {
  transition: 1s;
  fill: currentColor;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Ao pairar, o preenchimento mudará não 1 segundo, mas cerca de 2, porque primeiro a transição será aplicada para mudar a cor e, pelo que entendi, para cada mudança de cor do externo, uma mudança para o interno será acionada, mas se alguém tiver uma explicação mais precisa, terei prazer em lê-la.



Solução: especifique explicitamente transaction: fill para svg (se você especificar a cor , a situação não mudará, daí a saída acima).

svg {
  transition: fill 1.5s;
  fill: currentColor;
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Manter as proporções do bloco

Sempre pensei que todo mundo, qualquer desenvolvedor front-end experiente, conhece o antigo hack que permite manter as proporções do bloco, descobri que nem todos.



A propriedade padding , se especificada como uma porcentagem, é baseada exatamente na largura, o que nos permite fazer este truque:

.image-container {
  height: 0;
  position: relative;
  /*       */
  padding-top: calc(100% * 9 / 16 );
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Agora podemos colocar uma imagem neste contêiner, cuja altura será calculada pela largura do contêiner.

.img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

proporção da tela

Não muito tempo atrás, a propriedade de proporção de aspecto foi adicionada, o que permite que você faça tudo o que você vê de cima em uma linha.

.image {
  aspect-ratio: 16 / 9;
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

As principais, na minha opinião, as diferenças e conveniências desta propriedade são que:

1. Não precisamos de um container
2. Se a largura OU a altura for especificada, o segundo valor será calculado com base no valor da proporção
3. Se a largura E a altura forem fornecidas, a propriedade será ignorada

O suporte para proporção de aspecto ainda está longe dos estimados 95%, então use com cuidado

Não adie a paginação para mais tarde

Parece, claro, estranho, mas como uma pessoa que fez uma frente de vários produtos do zero, direi que sempre há a tentação de "pontuar" na paginação de listas, opções em seletores, tabelas, etc. Decidi por mim mesmo que nunca colocaria isso em segundo plano, porque assim que os usuários começam a gerar dados, as páginas começam a ficar lentas, a busca pelas causas dos freios, claro, não é muito difícil, mas quando se se trata de pesquisar, a situação requer uma solução imediata e isso é nervosismo, merda de código e perda de credibilidade com o departamento de desenvolvimento.

Controlando a aparência dos componentes por meio de variáveis ​​css

As variáveis ​​em css já são amadas e respeitadas por muitos, mas a experiência das entrevistas mostrou que poucas pessoas as usam e ainda menos pessoas sabem sobre o verdadeiro poder da herança. A maior parte disso permaneceu na parte da documentação onde eles falam sobre : root (e esta é apenas uma pseudo-classe - um apelido para a raiz da árvore, na maioria das vezes para html).



Então, imagine que temos um componente de botão com estilos de escopo (no exemplo, eu uso Vue.js), que tem os seguintes estilos:

.button {
  color: var(--text-color, #000);
  background-color: var(--bg-color, #444)
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

E então podemos simplesmente definir a classe .dark no componente pai:

.dark {
    --text-color: #fff;
    --bg-color: #333
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

E passe essa classe para o componente do botão:

<my-button class="dark"/>

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

E agora esse controle de estilo simples sem sobrescrever estilos CSS no pai está disponível usando um poderoso mecanismo de herança de variáveis.

Insetos engraçados e excruciantes

Quero resumir este artigo com uma história sobre pequenos, mas desagradáveis ​​bugs de linha de frente que meus colegas e eu detectamos.

Inserindo imagens no editor wysiwyg

Em editores de texto no navegador (usamos quill), é possível inserir uma imagem de outro site usando ctrl + v. Não pensamos nisso, que todos usam o mecanismo implementado de inserção de imagens, mas os usuários são esses usuários. Um site, especialmente sensível ao empréstimo de imagens, determinou de onde vinha o pedido e se o domínio não era dele, deu um banner publicitário de seu próprio produto, o que é verdade, claro, mas nos surpreendeu. Então, se você está desenvolvendo / usando wysiwyg, observe o que e onde inserir =)

Vue SSR + Cloudflare = <3

O problema que o camarada mencionado anteriormente me falou.



Somente quando você vai para uma página que foi gerada e fornecida por SSR e navegação subsequente do SPA, todas as solicitações para a API foram duplicadas. Por muito tempo eles não conseguiram entender o que estava acontecendo. Após uma pesquisa cuidadosa, descobriu-se que o rodapé tem um campo padrão com o e-mail da empresa, mas o cloudflare ofusca o e-mail (para proteger contra raspadores). Quando o Vue no servidor coleta uma árvore em js, em seguida, obtém outra árvore no cliente (com correspondência incompatível), a reidratação do Vue quebrou e travou, criando uma nova instância do vue, mas não eliminando a antiga incompleta. Como resultado, sob certas circunstâncias, 2 instâncias do Vue estavam em execução na página ao mesmo tempo.



Isso é tudo. Comentários, desejos, críticas severas - Terei o maior prazer em ler tudo isso e tirar conclusões.