recursal/MDN huggingface dataset:
SVG
===

*Scalable Vector Graphics* (**SVG**) é um formato de imagem vetorial 2D baseado em uma sintaxe XML.

A W3C iniciou o trabalho no SVG no final dos anos 1990, mas o SVG só se tornou popular quando o Internet Explorer (en-US) 9 foi lançado com suporte a SVG. Atualmente a maioria dos navegadores suportam SVG.

Baseado na sintaxe de XML, SVG pode ser estilizado com CSS e apresentar interatividade usando JavaScript. Em HTML5 é possível embutir diretamente tags SVG em um documento HTML.

Sendo um formato para gráficos vetoriais, imagens SVG podem ser redimensionadas infinitamente, tendo um valor inestimável em design responsivo (en-US), já que você pode criar elementos de interface e gráficos que se comportam bem em qualquer tamanho de tela. SVG também traz um conjunto de funcionalidades úteis, como clipping, máscaras, filtros e animações.

Exemplo
-------

Abaixo você pode conferir a renderização de dois círculos de tamanhos e cores diferentes utilizando SVG.


```xml
<svg width="100" height="300">
   <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="10" fill="red" />
   <circle cx="50" cy="150" r="20" stroke="green" stroke-width="10" fill="yellow" />
</svg>
```


Repare que `cx` e `cy` são para definir as coordenadas x e y do círculo, `r` é para definir o raio do círculo, o preenchimento é definido com `fill`, a largura do contorno é definida com `stroke-width` e a cor do contorno é definida com `stroke`. Lembrando que a largura e altura do `svg` em si são definidas no próprio elemento.

Saiba mais
----------

### Conhecimento Geral

* SVG na Wikipedia
### Aprendendo SVG

* W3.org's SVG Primer (em inglês)
### Informação técnica

* Documentação sobre SVG na MDN
* Especificação SVG mais recente (em inglês)
Metadata
========

Os **metadados** são — em sua definição mais simples — dados que descrevem dados. Por exemplo, um documento HTML é um dado, mas o HTML, também, pode conter metadados em seu elemento `<head>` que descreve o documento — por exemplo, quem o escreveu e seu resumo.

Saiba mais
----------

### Conhecimento geral

* metadata na Wikipedia
### Metadados HTML

* O elelmento `<meta>` no MDN
AJAX
====

AJAX (Asynchronous JavaScript e XML) é uma prática de programação da combinação de HTML, CSS, JavaScript, o DOM, e o `XMLHttpRequest` object para a construção de páginas web mais complexas.

O que o AJAX permite é que você faça apenas atualizações em partes de uma página web ao invés de recarregá-la inteira novamente. O AJAX também permite que você trabalhe de forma assíncrona, o que significa que o seu código continua rodando enquanto uma parte da sua página está em processo de carregamento (em comparação com síncrono, que irá bloquear a execução do seu código até que toda a sua página web seja recarregada).

Com websites interativos e padrões web modernos, o AJAX está sendo substituído gradualmente por funcões presentes em frameworks JavaScript e o padrão oficial Fetch API.

Saiba mais
----------

### Conhecimentos gerais

* AJAX na Wikipedia
### Informações técnicas

* O objeto `XMLHttpRequest` .
* A documentação AJAX no MDN
* Fetch API no MDN
Degradação graciosa
===================

**Degradação graciosa** é uma filosofia de design centrada na tentativa de criar um site/aplicativo moderno que funcione nos navegadores mais recentes, mas recorre a uma experiência que, embora não tão boa, ainda oferece conteúdo e funcionalidade essenciais para os navegadores antigos.

Polyfills podem ser usados para criar com JavaScript recursos ausentes, mas alternativas aceitáveis para recursos como estilo e layout devem ser fornecidas sempre que possível, por exemplo, usando a cascata CSS ou o comportamento de HTML substituto. Alguns bons exemplos podem ser encontrados em Handling common HTML and CSS problems (en-US).

 É uma técnica útil que permite aos desenvolvedores da Web se concentrarem no desenvolvimento dos melhores sites possíveis, uma vez que esses sites são acessados por vários user-agents desconhecidos.
 Progressive enhancement (en-US) está relacionado, mas é diferente - geralmente visto como na direção oposta à degradação graciosa. Na realidade, ambas as abordagens são válidas e geralmente podem se complementar.

1. Graceful degradation on Wikipedia
2. Handling common HTML and CSS problems (en-US)
3. Implementing feature detection (en-US)
4. MDN Web Docs Glossary
    1. Graceful degradation
    2. Polyfill
    3. Progressive enhancement (en-US)
Nome de cabeçalho proibido
==========================

Um *nome de cabeçalho proibido* é o nome de qualquer cabeçalho HTTP que não pode ser modificado programaticamente; especificamente, um nome de cabeçalho de **solicitação** HTTP (em contraste com um Forbidden response header name).

Modificar esses cabeçalhos é proibido porque o agente do usuário retém o controle total sobre eles. Nomes começando com `Sec-` são reservados para criar novos cabeçalhos seguros de APIs usando Fetch que concedem aos desenvolvedores controle sobre cabeçalhos, como `XMLHttpRequest`.

Nomes de cabeçalho proibidos começam com `Proxy-`ou `Sec-`, ou são um dos seguintes nomes:

* `Accept-Charset`
* `Accept-Encoding`
* `Access-Control-Request-Headers`
* `Access-Control-Request-Method`
* `Connection`
* `Content-Length`
* `Cookie`
* `Cookie2`
* `Date`
* `DNT`
* `Expect`
* `Host`
* `Keep-Alive`
* `Origin`
* `Proxy-`
* `Sec-`
* `Referer`
* `TE`
* `Trailer`
* `Transfer-Encoding`
* `Upgrade`
* `Via`

**Nota:** O cabeçalho `User-Agent` não é mais proibido, de acordo com a especificação - consulte a lista de nomes de cabeçalhos proibidos (isso foi implementado no Firefox 43) - agora ele pode ser definido em um objeto e busca de Headers (en-US), ou via XHR setRequestHeader().
Node.js
=======

Node.js é um ambiente de execução multi-plataforma em JavaScript que permite aos desenvolvedores produzirem aplicações para rede e server-side usando o JavaScript.

Aprenda mais
------------

### Conhecimentos gerais

* Node.js no Wikipédia
* Site do Node.js
### Referência técnica

* Documentação da API
* Tutoriais
IIFE
====

**IIFE** (Immediately Invoked Function Expression) é uma função em JavaScript que é executada assim que definida.

É um Design Pattern também conhecido como Self-Executing Anonymous Function e contém duas partes principais. A primeira é a função anônima cujo escopo léxico é encapsulado entre parênteses. Isso previne o acesso externo às variáveis declaradas na IIFE, bem como evita que estas variáveis locais poluam o escopo global.

A segunda parte corresponde à criação da expressão `()`, por meio da qual o interpretador JavaScript avaliará e executará a função.

Exemplos
--------

A função se torna uma expressão que é imediatamente executada. A variável definida dentro da expressão não pode ser acessada fora de seu escopo.


```js
(function () {
  var nome = "Felipe";
})();
// A variável nome não é acessível fora do escopo da expressão
nome; // gerará o erro "Uncaught ReferenceError: nome is not defined"
```


Atribuir uma IIFE a uma variável não armazenará a função em si, mas o **resultado da função.**


```js
var result = (function () {
  var nome = "Felipe";
  return nome;
})();
// Imediatamente gera a saída:
result; // "Felipe"
```

Aprenda Mais
------------

### Aprenda mais sobre IFFE

* Ben Alman's blog post defining IIFEs
* Quick example (at the end of the "Functions" section, right before "Custom objects")
### Conhecimentos Gerais

* IIFE on Wikipedia
Chrome
======

Em um navegador, o chrome é qualquer aspecto visível do navegador aparte das páginas web (ex., barra de ferramentas, menus, abas). Não deve ser confundido com o Google Chrome (en-US) navegador.

Aprenda mais
------------

* Browser and GUI Chrome
URI
===

A **URI** (*Uniform Resource Identifier*, ou *Identificador Uniforme de Recursos*) é uma string (sequência de caracteres) que se refere a um recurso. A mais comum é a URL, que identifica o recurso localizando-o na Web. URNs (en-US), em contraste, refere-se a um recurso pelo nome, em dado namespace. Ex: o ISBN de um livro.

Aprenda mais
------------

### Conhecimento geral

* URI na Wikipedia
* RFC 3986 on URI
* data URIs (en-US)
* www vs non-www (en-US)
Abstração
=========

Abstração em programação de computadores é uma forma de reduzir a complexidade e tornar o projeto e a implementação mais eficientes em sistemas complexos de software. Ela esconde a complexidade técnica de um sistema por trás de uma APIs mais simples.

Saiba mais
----------

### Conhecimentos gerais

* Abstração na Wikipédia
Booleano
========

Um **booleano**, em ciência da computação, é um tipo de dado lógico que pode ter apenas um de dois valores possíveis: `verdadeiro` ou `falso`. Por exemplo, em JavaScript, condicionais booleanas são usadas para decidir quais trechos do código serão executados ou repetidas.
```

if (condicao booleana) {
   // codigo a executar se o booleano for TRUE
}

if (condicao booleana) {
  console.log("booleano é verdadeiro");
} else {
  console.log("booleano é falso");
}

/* JavaScript for loop */
for (variavel de controle; condicao booleana; contador) {
  // codigo a se repetir se o booleano for TRUE
}

for (var i=0; i < 4; i++) {
  console.log("codigo a executar se a condicao for verdadeira, ou seja até 'i' atingir o valor de 4 ");
}
```

Veja mais
---------

### Referências externas

* Boolean on Wikipedia (em inglês)
* Booleano na Wikipedia
### Referência

* O objeto global JavaScript: `Boolean`
marcação
========

 Uma linguagem de marcação é aquela projetada para definir e apresentar textos.
 HTML (Linguagem de Marcação de Hipertexto), é um exemplo de linguagem
 de marcação.

 Em um arquivo de texto, como um arquivo HTML, os elementos são *marcados* utilizando tags, que explica o
 objetivo dessa parte do conteúdo.

Tipos de linguagem de marcação
------------------------------

**Marcação de Apresentação** (em inglês: *Presentational Markup*):

 Tradicionalmente utilizado pelos pelos processadores de texto, são marcações incorporadas no texto que produzem o efeito
 WYSIWYG ("O que você vê é o que você obtém"). Sem a necessidade de manipulação direta de código,
 geralmente essas marcações são feitas para serem ocultas dos usuários humanos, autores ou editores. De maneira mais apropriada, esses sistemas usam a
 marcação procedimental e/ou descritiva "por debaixo dos panos", mas as convertem para apresentar pro usuário de maneira renderizada.


**Marcação Procedimental** (em inglês: *Procedural Markup*):

 Fornece instruções para os programas processarem o texto. Exemplos conhecidos incluem troff, TeX e PostScript. Espera-se que o processador execute o texto
 do começo ao fim, seguindo as instruções encontradas. O texto com essa marcação geralmente é editado com a marcação visível e manipulada diretamente pelo
 autor. Os sistemas procedimentais mais populares geralmente incluem construções de programação, e macros ou sub-rotinas que são comumente definidas para que
 conjuntos complexos de instruções possam ser chamados por um nome simples (e talvez alguns parâmetros). Isso é muito mais rápido, menos propenso a erros e
 fácil de manutenção do que repor as mesmas instruções ou instruções semelhantes em muitos lugares.


**Marcação Descritiva** (em inglês: *Descriptive Markup*):

 Usada especificamente para rotular partes do documento como elas são, e não como devem ser processadas. Sistemas conhecidos que fornecem muitos desses
 rótulos incluem LaTeX, HTML e XML. O objetivo é dissociar a estrutura do documento de qualquer tratamento ou representação particular. Essa marcação é
 frequentemente descrita como "semântica". Um exemplo de uma marcação descritiva seria a tag
 `<cite>` do HTML, usada para rotular uma citação. Essa marcação incentiva os autores a
 escrever de uma maneira que descreva o material conceitualmente, em vez de apenas visualmente.



 Há um borrão considerável das linhas entre os tipos de marcação. Nos sistemas modernos de processamento de texto, a marcação de apresentação é geralmente
 salva em sistemas orientados a marcação descritiva, como XML, e depois processada procedimentalmente por outras sistemas. O TeX, linguagem de marcação
 procedimental, pode ser usada para criar sistemas de marcação com natureza mais descritiva, como o LaTeX.
REST
====

**REST** (Representational State Transfer) refere-se a um grupo de restrições de design dentro da arquitetura de software que geram sistemas distribuídos eficientes, confiáveis e escaláveis. Um sistema é denominado RESTful quando adere a todas essas restrições.

A ideia básica do REST é que um recurso, por exemplo um documento, seja transferido com seu estado bem definido, padronização de operações e formatos, ou serviços que se autodenominem RESTful, quando modificam diretamente o tipo de documento, ao invés de desencadear ações em algum lugar.

Como o HTTP, protocolo padrão por trás da "World Wide Web", a "Web" também transfere documentos e links de hipertexto. APIs HTTP simples são às vezes chamadas de APIs RESTful, serviços RESTful ou simplesmente serviços REST, embora não adotem todas as restrições REST necessariamente. Os iniciantes podem presumir que uma API REST significa um serviço HTTP que pode ser chamado usando bibliotecas e ferramentas padrões da web.

### Saiba mais

* restapitutorial.com
* restcookbook.com
### Conhecimento geral

* REST na Wikipédia
* REST Architecture
undefined
=========

Um valor **primitive** automaticamente atribuido para **variaveis** que foram recentemente declaradas ou para **arguments formais** para qual não existem **argumentos atualmente**.

Aprenda mais
------------

### Conhecimentos gerais

* Undefined value no Wikipedia
### Referência Técnica

* JavaScript data types and data structures
Hoisting
========

Hoisting (içamento, em português) é um termo que você *não* encontrará usado em nenhuma prosa de especificação normativa antes da especificação de idioma do ECMAScript® 2015. Hoisting foi pensado como uma maneira geral de pensar sobre como os contextos de execução (especificamente as fases de criação e execução) funcionam em JavaScript. No entanto, o conceito pode ser um pouco confuso a princípio.

Conceitualmente, por exemplo, uma definição estrita de elevação sugere que as declarações de variáveis e funções são fisicamente movidas para o topo do seu código, mas isso não é realmente o que acontece. Em vez disso, as declarações de variável e função são colocadas na memória durante a fase de *compilação*, mas permanecem exatamente onde você as digitou no seu código.

Aprenda mais
------------

### Exemplo técnico

Variáveis:

Uma das vantagens do JavaScript em colocar declarações de função na memória antes de executar qualquer segmento de código é que ele permite que você use uma função antes de declara-la em seu código. Por exemplo:


```js
function catName(name) {
  console.log("O nome do meu gato é " + name);
}

catName("Tigger");

/\*
O resultado do código acima é: "O nome do meu gato é Tigger"
\*/
```


O trecho de código acima é como você escreveria o código para que ele funcionasse. Agora, vamos ver o que acontece quando chamamos a função antes de escrevê-la:


```js
catName("Chloe");

function catName(name) {
  console.log("O nome do meu gato é " + name);
}
/\*
O resultado do código acima é: "O nome do meu gato é Chloe"
\*/
```


Mesmo que chamemos a função em nosso código primeiro, antes que a função seja escrita, o código ainda funciona. Isto ocorre por conta de como a execução de contexto funciona em JavaScript.

Hoisting funciona bem com outros tipos de dados e variáveis. As variáveis podem ser inicializadas e usadas antes de serem declaradas.

### Apenas declarações são hoisted(içadas, em português)

O JavaScript apenas eleva (hoists) as declarações, não as inicializações. Se uma variável for declarada e inicializada após usá-la, o valor será undefined. Por exemplo:


```js
console.log(num); // Retorna undefined
var num;
num = 6;
```


Se você declarar a variável depois que ela for usada, mas inicializá-la antecipadamente, ela retornará o valor:


```js
num = 6;
console.log(num); // retorna 6
var num;
```


Abaixo estão mais exemplos demonstrando a elevação (hoisting).


```js
//Exemplo 1 - Não eleva (hoist)
var x = 1; // Inicializa x
console.log(x + " " + y); // '1 undefined'
var y = 2; // Initialize y
//Isso não funcionará, pois o JavaScript apenas eleva declarações

//Example 2 - Hoists
var num1 = 3; //Declara e inicializa num1
num2 = 4; //Inicializa num2
console.log(num1 + " " + num2); //'3 4'
var num2; //Declara num2 para hoisting

//Example 3 - Hoists
a = "Cran"; //Inicializa a
b = "berry"; //Inicializa b
console.log(a + "" + b); // 'Cranberry'
var a, b; //Declara ambos a & b para hoisting
```

### Referência técnica

* var statement — MDN
* function statement — MDN
Selector (CSS)
==============

O **seletor CSS** é parte da regra do CSS que lhe permite selecionar qual elemento(s) vai receber o estilo pela regra.

Exemplos
--------

### HTML


```html
<div>Eu estou dentro do elemento.</div>
<p>Eu estou dentro de um elemento de parágrafo.</p>
```

### CSS


```css
div {
  color: green;
}

p {
  color: red;
}
```


Nessa primeira regra do CSS, eu estou selecionando o elemento da div estilizando-a colorindo o texto para verde. Na segunda regra do CSS, eu estou selecionando o elemento "p" e estilizando-a colorindo o texto para vermelho. Aqui estão os resultados:

![CSS selector coding results](/pt-BR/docs/Glossary/CSS_Selector/cssselectormdnglossary.jpg)

Aprenda mais
------------

### Conhecimento geral

* Seletores básicos
    + Tipos de seletores `elementname`
    + Classes seletoras `.classname`
    + ID seletores `#idname`
    + Seletores universais `* ns|* *|*`
    + Seletores de atributos `[attr=value]`
    + `Seletores de estado a:active, a:visited`
* Combinadores
    + Seletores de irmão adjacentes (en-US) `A + B`
    + Seletores de irmãos gerais `A ~ B`
    + Seletores filhos (en-US) `A > B`
    + Seletores descendentes (en-US) `A B`
* Pseudo-elementos
* Pseudo-classes
### Referência técnica

Selectors Level 3
URL
===

*Uniform Resource Locator* (**URL**) é uma sequência de texto que especifica onde um recurso pode ser encontrado na Internet.

No contexto de HTTP, URLs são chamadas de "Endereços web" ou "link". Seu navegador exibe as URLs na barra de endereços, por exemplo `https://developer.mozilla.org`

URLs também podem ser usadas para transferir arquivos por (FTP (en-US)) , emails (SMTP (en-US)), e outras aplicações.

Aprenda mais
------------

### Conhecimento Geral

* URL na Wikipedia
### Saiba mais

* Entendendo URLs e sua estrutura
Endianness
==========

"Endian" and "endianness" (ou "ordem-de-bytes") descrevem como os computadores organizam os bytes que compõem os números.

Cada local de armazenamento de memória possui um indice ou endereço. Cada byte pode ser armazenado em um numero de 8-bits (ou seja, entre `0x00` e `0xff`), então você deve reservar mais que um byte para armazenar um numero maior. De longe, o mais comum na ordenação de múltiplos bytes em um único número é o **little-endian,** que é usado em todos os processadores Intel. Little-endian significa armazenar bytes na ordem do menor para o mais significativo (onde o byte menos significativo ocupa o primeiro, ou menor, endereço), comparável a maneira comum de escrever datas na Europa (por exemplo, 31 Dezembro de 2050).

Naturalmente, **big-endian** é a ordem oposta, comparável a uma data ISO (2050-12-31). Big-endian é frequentemente chamada de "ordem de bytes de rede", por que os padrões da internet geralmente exigem que os dados sejam armazenados em big-endian, começando pelo nivel padrão do socket UNIX e indo a todas as estruturas padronizadas de dados binários da Web. Além disso, os computadores Mac mais antigos, que usam a série 68000 e microprocessadores PowerPC, usavam o big-endian.

Exemplos com o numero `0x12345678` (ou seja, 305 419 896 em decimal):

* *little-endian:* `0x78 0x56 0x34 0x12`
* *big-endian:* 0x12 0x34 0x56 0x78
* *mixed-endian* (histórico e muito raro): 0x34 0x12 0x78 0x56
Veja também
-----------

* `ArrayBuffer`
* `DataView`
* Typed Arrays
* Endianness na Wikipedia
Navegador
=========

Um navegador *Web* é um programa que obtém e exibe páginas da Web (en-US), e permite que os usuários acessem outras páginas através de hyperlinks (en-US).

Saiba mais
----------

### Conhecimento geral

* Navegador web na Wikipedia
* The evolution of the web
### Baixar um navegador

* Mozilla Firefox
* Google Chrome
* Microsoft Internet Explorer
* Opera Browser
Pixel CSS
=========

O **Pixel CSS** - denotado no CSS pelo sufixo px - é uma unidade de comprimento que corresponde aproximadamente a largura ou altura de um ponto único que pode ser confortavelmente visto pelos olhos humanos sem esforço, mas é o menor possível. Por definição, esse é o tamanho físico de um único píxel em uma densidade de 96 DPI, situado a um braço de distância dos olhos do observador.

Essa definição, é claro, se demonstra ser muito vaga, e termos como "confortavelmente visto" e "braço de distância" são imprecisas, variando de pessoa para pessoa. Por exemplo, quando um usuário se senta em sua mesa, defronte a sua área de trabalho, o monitor geralmente estará longe dos seus olhos enquanto ele estiver usando o celular.

Assim sendo, geralmente basta dizer que quando a unidade de px é usada, o objetivo é tentar manter a distancia de 96px equivalentes a 1 polegada na tela, independentemente da densidade da tela. Em outras palavras, se o usuário está em celular com uma densidade de pixel de 266 DPI, e há um elemento colocado na tela com uma largura de 96px, então este elemento ocupará uma largura de 266px nos pixels do dispositivo.

Saiba mais
----------

### Referência técnica

* CSS Values and Units Module, section 5.2: Absolute Lengths
### Aprenda sobre

* CSS Length Explained on the MDN Hacks Blog
Flexbox
=======

Flexbox é o nome normalmente usado para o Módulo CSS Flexible Box Layout, um modelo de layout para mostrar itens numa única dimensão — como linha ou como coluna. Inserir uma caixa dentro da outra (p. ex. linha numa coluna, ou coluna numa linha) permite a criação de layouts em duas dimensões.

Na especificação, Flexbox é descrito como um modelo de layout usado na criação de interfaces. A principal característica do Flexbox é o fato que itens em um layout podem crescer ou encolher. Espaços podem ser atribuídos aos próprios itens, distribuídos entre eles, ou posicionados ao redor dos mesmos.

Flexbox também permite o alinhamento de itens tanto no Eixo Principal (en-US) quanto no Eixo Transversal (en-US), provendo um alto nível de controle sobre o tamanho e alinhamento de grupos de itens.

Ver também
----------

### Referência de propriedades

* `align-content`
* `align-items`
* `align-self`
* `flex`
* `flex-basis` (en-US)
* `flex-direction`
* `flex-flow`
* `flex-grow` (en-US)
* `flex-shrink` (en-US)
* `flex-wrap`
* `justify-content` (en-US)
* `order` (en-US)
### Leitura adicional

* *CSS Flexible Box Layout Module Level 1 Specification*
* Guia CSS Flexbox: *`Conceitos básicos de flexbox`*
* Guia CSS Flexbox: *`Relação entre flexbox e outros métodos de layout` (en-US)*
* Guia CSS Flexbox: *`Alinhando itens em um container Flex`*
* Guia CSS Flexbox: *`Ordenando itens flex` (en-US)*
* Guia CSS Flexbox: *`Controlando proporções de itens flex ao longo do eixo principal` (en-US)*
* Guia CSS Flexbox: *`Dominando o uso da propriedade wrap` (en-US)*
* Guia CSS Flexbox: *`Casos típicos de uso do Flexbox` (en-US)*
Escopo
======

É o contexto atual de execução, em que valores e expressões são "visíveis" ou podem ser referenciadas. Se uma variável ou outra expressão não estiver "no escopo atual", então não está disponível para uso. Os escopos também podem ser em camadas em uma hierarquia, de modo que os escopos filhos tenham acesso aos escopos pais, mas não vice-versa.

Uma function serve como um procedimento em JavaScript, e portanto, cria um escopo, de modo que (por exemplo) uma variável definida exclusivamente dentro da função não pode ser acessada de fora da função ou dentro de outras funções.

Aprender mais
-------------

### Conhecimento geral

* Escopo (computação) em Wikipedia