qns(quiz): fix pt-BR translations Markdown errors
This commit is contained in:
Yangshun
parent
3d069212e3
commit
3150e75e87
|
|
@ -7,7 +7,7 @@ Em poucas palavras, posicionamento CSS `<link>`s and JavaScript `<script>`s perm
|
|||
|
||||
## Colocando `<link>`s em `<head>`
|
||||
|
||||
Colocar `<link>`s em `<head>` faz parte da especificação adequada na construção de um site otimizado. Quando uma página é carregada pela primeira vez, HTML e CSS são analisados simultaneamente; O HTML cria o DOM (modelo de objeto do documento) e o CSS cria o modelo de objeto CSSOM (CSS Object Model). Ambos são necessários para criar os elementos visuais de um site, permitindo um tempo rápido para o "primeiro desenho significativo" (first meaningful paint). Colocar o CSS<link>`s no `<head>\` garante que os estilos são carregados e prontos para uso quando o navegador começar a renderizar a página.
|
||||
Colocar `<link>`s em `<head>` faz parte da especificação adequada na construção de um site otimizado. Quando uma página é carregada pela primeira vez, HTML e CSS são analisados simultaneamente; O HTML cria o DOM (modelo de objeto do documento) e o CSS cria o modelo de objeto CSSOM (CSS Object Model). Ambos são necessários para criar os elementos visuais de um site, permitindo um tempo rápido para o "primeiro desenho significativo" (first meaningful paint). Colocar o CSS`<link>`s no `<head>` garante que os estilos são carregados e prontos para uso quando o navegador começar a renderizar a página.
|
||||
|
||||
Esta renderização progressiva é uma métrica em que os sites são medidos na sua pontuação de desempenho. Colocar folhas de estilo perto do final do documento é o que impede a renderização progressiva em muitos navegadores. Alguns navegadores bloqueiam a renderização para evitar ter que repintar elementos da página se seus estilos mudarem. O usuário fica então preso visualizando uma página em branco. Outras vezes, podem ocorrer flashes de conteúdo não estilizado (FOUC), que mostram uma página da web sem a aplicação de estilos.
|
||||
|
||||
|
|
@ -17,8 +17,8 @@ Esta renderização progressiva é uma métrica em que os sites são medidos na
|
|||
|
||||
Uma exceção para posicionamento de `<script>`s na parte inferior é quando o script contém `documento.write()`, mas hoje em dia não é uma boa prática usar `document.write()`. Também, colocar `<script>`s na parte inferior significa que o navegador não pode iniciar o download dos scripts até que o documento inteiro seja analisado. Isso garante que seu código que precisa manipular elementos DOM não irá lançar um erro e parar todo o script. Se você precisar colocar `<script>`s no `<head>`, use o atributo `defer`, que alcançará o mesmo efeito de executar o script somente depois que o HTML for analisado, mas o navegador pode expulsar a solicitação de rede antes de baixar o script.
|
||||
|
||||
Tenha em mente que colocar scripts antes da tag de fechamento `</body>` irá criar a ilusão de que a página carrega mais rápido em um cache vazio (já que os scripts não vão bloquear o download do resto do documento). No entanto, se você tiver algum código que deseja executar durante o carregamento da página, ele só começará a ser executado após o carregamento completo da página. Se você colocar esses scripts na tag \`<head>, eles começariam a ser executados antes, então em um cache carregado a página parece carregar mais rápido.
|
||||
Tenha em mente que colocar scripts antes da tag de fechamento `</body>` irá criar a ilusão de que a página carrega mais rápido em um cache vazio (já que os scripts não vão bloquear o download do resto do documento). No entanto, se você tiver algum código que deseja executar durante o carregamento da página, ele só começará a ser executado após o carregamento completo da página. Se você colocar esses scripts na tag `<head>`, eles começariam a ser executados antes, então em um cache carregado a página parece carregar mais rápido.
|
||||
|
||||
## As tags `<head>` e ` <body>` agora são opcionais
|
||||
## As tags `<head>` e `<body>` agora são opcionais
|
||||
|
||||
Como na especificação HTML5, certas tags HTML como `<head>` e`<body>` são opcionais. O guia de estilo do Google recomenda até a sua remoção para economizar bytes. No entanto esta prática ainda não é amplamente adotada e o ganho de desempenho é provavelmente mínimo e para a maioria dos sites isso não vai importar.
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@ Saber estabelecer um contexto de formatação de blocos é importante, porque se
|
|||
|
||||
Um BFC é uma caixa HTML que atende pelo menos uma das seguintes condições:
|
||||
|
||||
- O valor de 'float' não é 'none'.
|
||||
- O valor de `float` não é `none`.
|
||||
- O valor de `posição` não é `static` nem `relative`.
|
||||
- O valor de `display` é `table-cell`, `table-caption`, `inline-block`, `flex`, or `inline-flex`, `grid`, or `inline-grid`.
|
||||
- O valor de 'float' não é 'none'.
|
||||
- O valor de `float` não é `none`.
|
||||
|
||||
Em um BFC, a borda externa esquerda de cada caixa toca a borda esquerda do bloco contêiner (para formatação da direita para a esquerda, as bordas direitas se tocam).
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: Descreva a diferença entre<script>`, `<script async>` e `<script defer>`
|
||||
title: Descreva a diferença entre `<script>`, `<script async>` e `<script defer>`
|
||||
---
|
||||
|
||||
tags `<script>` são usadas para incluir JavaScript em uma página da web. Os atributos `async` e `defer` são usados para mudar como/quando o carregamento e a execução do script acontecem.
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ Idiomas como inglês e francês são escritos da esquerda para a direita, de cim
|
|||
|
||||
## Não concatene strings traduzidas
|
||||
|
||||
Não faça nada como `"A data de hoje é " + data`. Isso pode causar problemas em idiomas com ordens de palavras diferentes. Use uma string de modelo com substituição de parâmetros para cada idioma em vez disso. Por exemplo, observe as duas frases a seguir em inglês e chinês, respectivamente: I will travel on {% date %} e {% date %} 我会出发. Observe que a posição da variável é diferente devido às regras gramaticais do idioma.
|
||||
Não faça nada como `"A data de hoje é " + data`. Isso pode causar problemas em idiomas com ordens de palavras diferentes. Use uma string de modelo com substituição de parâmetros para cada idioma em vez disso. Por exemplo, observe as duas frases a seguir em inglês e chinês, respectivamente: `I will travel on {% date %}` e `{% date %} 我会出发`. Observe que a posição da variável é diferente devido às regras gramaticais do idioma.
|
||||
|
||||
## Formatação de datas e moedas
|
||||
|
||||
|
|
|
|||
|
|
@ -4,4 +4,4 @@ title: Explique como um navegador determina quais elementos correspondem a um se
|
|||
|
||||
Esta pergunta está relacionada com a pergunta sobre [escrever um CSS eficiente](/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css). Os navegadores combinam seletores da direita (seletor-chave) para a esquerda. Os navegadores filtram elementos no DOM de acordo com o seletor-chave e percorrem seus elementos pais para determinar correspondências. Quanto menor o comprimento da cadeia de seletores, mais rápido o navegador pode determinar se aquele elemento corresponde ao seletor.
|
||||
|
||||
Por exemplo, com um seletor `p span`, os navegadores primeiro encontram todos os elementos `<span>` e percorrem seus pais até a raiz para encontrar o elemento `<p>`. Para um determinado `<span>`, assim que ele encontrar um `<p>`, ele sabe que o<span>\` corresponde ao seletor e pode parar de atravessar seus pais.
|
||||
Por exemplo, com um seletor `p span`, os navegadores primeiro encontram todos os elementos `<span>` e percorrem seus pais até a raiz para encontrar o elemento `<p>`. Para um determinado `<span>`, assim que ele encontrar um `<p>`, ele sabe que o `<span>` corresponde ao seletor e pode parar de atravessar seus pais.
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ Congelar um objeto não permite que novas propriedades sejam adicionadas a um ob
|
|||
- Menos complicado: Programas com objetos imutáveis são menos complicados de se pensar, já que você não precisa se preocupar sobre como um objeto pode evoluir ao longo do tempo.
|
||||
- Compartilhamento fácil por referências: Uma cópia de um objeto é tão boa quanto outra, então você pode armazenar objetos em cache ou reutilizar o mesmo objeto várias vezes.
|
||||
- Seguro para threads: Objetos imutáveis podem ser usados com segurança entre threads em um ambiente multi-threaded, já que não há risco de serem modificados em outras threads que estão sendo executadas simultaneamente.
|
||||
- Menos necessidade de memória: Usando bibliotecas como [Immer](https://immerjs.github.io/immer/) e [Immutable.js]\(https://immutable-js. om/), objetos são modificados usando compartilhamento estrutural e menos memória é necessária para ter vários objetos com estruturas semelhantes.
|
||||
- Menos necessidade de memória: Usando bibliotecas como [Immer](https://immerjs.github.io/immer/) e [Immutable.js](https://immutable-js.com/), objetos são modificados usando compartilhamento estrutural e menos memória é necessária para ter vários objetos com estruturas semelhantes.
|
||||
- Não há necessidade de cópias defensivas: cópias defensivas não são mais necessárias quando objetos imutáveis são retornados ou passados para funções, uma vez que não há possibilidade de um objeto imutável ser modificado por ela.
|
||||
|
||||
### Contras
|
||||
|
|
|
|||
|
|
@ -38,6 +38,6 @@ var sayNameFromWindow2 = john.sayName2;
|
|||
sayNameFromWindow2(); // John
|
||||
```
|
||||
|
||||
O principal tirada aqui é que \`this pode ser alterado para uma função normal, mas o contexto sempre permanece o mesmo para uma arrow function. Então, mesmo que você esteja passando pela arrow function para diferentes partes do seu aplicativo, você não precisaria se preocupar com a mudança de contexto.
|
||||
O principal tirada aqui é que `this` pode ser alterado para uma função normal, mas o contexto sempre permanece o mesmo para uma arrow function. Então, mesmo que você esteja passando pela arrow function para diferentes partes do seu aplicativo, você não precisaria se preocupar com a mudança de contexto.
|
||||
|
||||
Isso pode ser particularmente útil em componentes de classe React. Se você definir um método de classe para algo como um manipulador de cliques usando uma função normal, e, em seguida, você passa que clica manipulando em um componente filho como uma propriedade, você também precisará vincular o `this` no construtor do componente pai. Se você ao invés disso usar uma arrow function, não há necessidade de vincular também "this", como o método irá automaticamente obter seu valor "this" no contexto léxico que está encapsulado. (Veja esse artigo para uma excelente demonstração e código de amostra: https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb)
|
||||
|
|
|
|||
|
|
@ -14,4 +14,4 @@ title: Quais são as vantagens / desvantagens de usar pré-processadores CSS?
|
|||
## Desvantagens
|
||||
|
||||
- Requer ferramentas para pré-processamento. Tempo de recompilação pode ser lento.
|
||||
- Não escrever CSS atual e potencialmente utilizável. Por exemplo, usando algo como [postcss-loader](https://github.com/postcss/postcss-loader) com o [webpack]\(https://webpack.js. rg/), você pode escrever CSS potencialmente compatível com o futuro, permitindo que você use coisas como variáveis CSS em vez de variáveis Sass. Assim, você está aprendendo uma nova sintaxe que pode pagar se/quando eles se tornarem padronizados.
|
||||
- Não escrever CSS atual e potencialmente utilizável. Por exemplo, usando algo como [postcss-loader](https://github.com/postcss/postcss-loader) com o [webpack](https://webpack.js.org/), você pode escrever CSS potencialmente compatível com o futuro, permitindo que você use coisas como variáveis CSS em vez de variáveis Sass. Assim, você está aprendendo uma nova sintaxe que pode pagar se/quando eles se tornarem padronizados.
|
||||
|
|
|
|||
|
|
@ -86,11 +86,11 @@ for (let elemento of arr) {
|
|||
}
|
||||
```
|
||||
|
||||
ES2015 introduz uma nova forma de iterar, o laço `para`, que permite repetir o loop sobre objetos que estejam em conformidade com o [protocolo iterável]\(https://developer. ozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol) como `String`, `Array`, `Set`, etc. Ele combina as vantagens do loop `for` e do método `forEach()`. A vantagem do laço `para` é que você pode parar dele, e a vantagem de `forEach()` é que ele é mais conciso que o laço `for` porque você não precisa de uma variável contadora. Com a declaração `para...of`, você obtém a capacidade de quebrar de um laço e uma sintaxe mais concisa.
|
||||
ES2015 introduz uma nova forma de iterar, o laço `para`, que permite repetir o loop sobre objetos que estejam em conformidade com o [protocolo iterável](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol) como `String`, `Array`, `Set`, etc. Ele combina as vantagens do loop `for` e do método `forEach()`. A vantagem do laço `para` é que você pode parar dele, e a vantagem de `forEach()` é que ele é mais conciso que o laço `for` porque você não precisa de uma variável contadora. Com a declaração `para...of`, você obtém a capacidade de quebrar de um laço e uma sintaxe mais concisa.
|
||||
|
||||
A maioria das vezes, prefira o método `.forEach`, mas realmente depende do que você está tentando fazer. Antes do ES2015, usamos laços `for` quando precisávamos encerrar prematuramente o laço usando `break`. Mas agora com ES2015, podemos fazer isso com a declaração `for...of`. Use laços `for` quando você precisar de mais flexibilidade, como incrementar o iterador mais de uma vez por laço.
|
||||
|
||||
Além disso, ao usar o `for...of` declaração, se você precisar acessar o índice e o valor de cada elemento de matriz, você pode fazer isso com ES2015 `Array. método rototype.entries()`:
|
||||
Além disso, ao usar o `for...of` declaração, se você precisar acessar o índice e o valor de cada elemento de matriz, você pode fazer isso com ES2015 `Array.prototype.entries()`:
|
||||
|
||||
```js
|
||||
const arr = ['a', 'b', 'c'];
|
||||
|
|
|
|||
Loading…
Reference in New Issue