Métodos de requisição HTTP Nota: O conteúdo original publicado em inglês no Mozilla Developer Network utiliza o termo "resource", mantido na tradução, que refere-se a qualquer destino válido ao executar uma conexão usando o protocolo HTTP. Na língua portuguesa, ao falar sobre requisições, o termo é pouco usado com essa finalidade ou contexto.     O protocolo HTTP define um conjunto de métodos de requisição responsáveis por indicar a ação a ser executada para um dado recurso. Embora esses métodos possam ser descritos como substantivos, eles também são comumente referenciados como HTTP Verbs (Verbos HTTP). Cada um deles implementa uma semântica diferente, mas alguns recursos são compartilhados por um grupo deles, como por exemplo, qualquer método de requisição pode ser do tipo safe, idempotent ou cacheable. GET O método GET solicita a representação de um recurso específico. Requisições utilizando o método GET devem retornar apenas dados. HEAD  O método HEAD solicita uma resposta de forma idêntica ao método GET, porém sem conter o corpo da resposta. POST O método POST é utilizado para submeter uma entidade a um recurso específico, frequentemente causando uma mudança no estado do recurso ou efeitos colaterais no servidor. PUT O método PUT substitui todas as atuais representações do recurso de destino pela carga de dados da requisição. DELETE O método DELETE remove um recurso específico. CONNECT O método CONNECT estabelece um túnel para o servidor identificado pelo recurso de destino. OPTIONS O método OPTIONS é usado para descrever as opções de comunicação com o recurso de destino. TRACE O método TRACE executa um teste de chamada loop-back junto com o caminho para o recurso de destino. PATCH O método PATCH é utilizado para aplicar modificações parciais em um recurso.

CSS selectors Em CSS, os seletores são usados ​​para direcionar os elementos HTML em nossas páginas da web que queremos estilizar. Há uma grande variedade de seletores CSS disponíveis, permitindo uma precisão refinada ao selecionar os elementos a serem estilizados. Neste artigo e seus sub-artigos, examinaremos os diferentes tipos em grande detalhe, vendo como eles funcionam. Pré-requisitos:Conhecimento básico de informática, software básico instalado , conhecimento básico de como trabalhar com arquivos , conceitos básicos de HTML (estude Introdução ao HTML ) e uma ideia de como o CSS funciona (estude os primeiros passos do CSS ). Objetivo:Para saber como os seletores CSS funcionam em detalhes. O que é um seletor? Você já conheceu os seletores. Um seletor CSS é a primeira parte de uma regra CSS. É um padrão de elementos e outros termos que informam ao navegador quais elementos HTML devem ser selecionados para que os valores de propriedade CSS dentro da regra sejam aplicados a eles. O elemento ou elementos que são selecionados pelo seletor são referidos como o assunto do seletor .   Em artigos anteriores, você conheceu alguns seletores diferentes e aprendeu que existem seletores que direcionam o documento de maneiras diferentes - por exemplo, selecionando um elemento como h1, ou uma classe como .special. Em CSS, os seletores são definidos na especificação dos seletores CSS; como qualquer outra parte do CSS, eles precisam ter suporte em navegadores para funcionarem. A maioria dos seletores que você encontrará são definidos na especificação de Seletores de nível 3 , que é uma especificação madura, portanto, você encontrará um excelente suporte de navegador para esses seletores. Listas de seleção Se você tiver mais de um item que usa o mesmo CSS, os seletores individuais podem ser combinados em uma lista de seletores para que a regra seja aplicada a todos os seletores individuais. Por exemplo, se eu tiver o mesmo CSS para um h1e também para uma classe de .special, poderia escrever isso como duas regras separadas. h1 { color: blue; } .special { color: blue; } Eu também poderia combiná-los em uma lista de seletores, adicionando uma vírgula entre eles. h1, .special { color: blue; } O espaço em branco é válido antes ou depois da vírgula. Você também pode achar os seletores mais legíveis se cada um estiver em uma nova linha. h1, .special { color: blue; }   Ao agrupar seletores dessa forma, se algum seletor for inválido, a regra inteira será ignorada. No exemplo a seguir, a regra do seletor de classe inválida será ignorada, enquanto o h1ainda seria estilizado. h1 { color: blue; } ..special { color: blue; } Quando combinados, no entanto, nem o h1nem a classe terão o estilo, pois a regra inteira é considerada inválida. h1, ..special { color: blue; } Tipos de seletores Existem alguns agrupamentos diferentes de seletores e saber qual tipo de seletor você pode precisar o ajudará a encontrar a ferramenta certa para o trabalho. Nos subartículos deste artigo, examinaremos os diferentes grupos de seletores com mais detalhes. Seletores de tipo, classe e ID Este grupo inclui seletores que têm como alvo um elemento HTML, como um <h1>. h1 { } Também inclui seletores que direcionam uma classe: .box { } ou um ID: #unique { } Seletores de atributos Este grupo de seletores oferece diferentes maneiras de selecionar elementos com base na presença de um determinado atributo em um elemento: a[title] { } Ou até mesmo faça uma seleção com base na presença de um atributo com um valor específico: a[href="https://example.com"] { } Pseudo classes e pseudo-elementos Este grupo de seletores inclui pseudo classes, que definem o estilo de certos estados de um elemento. A :hoverpseudoclasse, por exemplo, seleciona um elemento apenas quando ele está sendo passado pelo ponteiro do mouse: a:hover { } Também inclui pseudoelementos, que selecionam uma determinada parte de um elemento em vez do próprio elemento. Por exemplo, ::first-linesempre seleciona a primeira linha de texto dentro de um elemento (a <p>no caso abaixo), agindo como se a tivesse <span>sido colocado em volta da primeira linha formatada e então selecionado. p::first-line { } Combinadores O grupo final de seletores combina outros seletores para direcionar os elementos em nossos documentos. O seguinte, por exemplo, seleciona parágrafos que são filhos diretos de <article>elementos usando o combinador filho ( >): article > p { } Próximos passos Você pode dar uma olhada na tabela de referência de seletores abaixo para obter links diretos para os vários tipos de seletores nesta seção Aprender ou no MDN em geral, ou continuar para iniciar sua jornada descobrindo sobre seletores de tipo, classe e ID .   Tabela de referência de seletores A tabela a seguir fornece uma visão geral dos seletores disponíveis para uso, juntamente com links para as páginas deste guia que mostram como usar cada tipo de seletor. Também incluí um link para a página MDN de cada seletor, onde você pode verificar as informações de suporte do navegador. Você pode usar isso como uma referência para voltar quando precisar consultar os seletores mais tarde no material, ou quando você experimentar CSS em geral. SelectorExampleLearn CSS tutorial Type selectorh1 {  }Type selectors Universal selector* {  }The universal selector Class selector.box {  }Class selectors id selector#unique { }ID selectors Attribute selectora[title] {  }Attribute selectors Pseudo-class selectorsp:first-child { }Pseudo-classes Pseudo-element selectorsp::first-line { }Pseudo-elements Descendant combinatorarticle pDescendant combinator Child combinatorarticle > pChild combinator Adjacent sibling combinatorh1 + pAdjacent sibling General sibling combinatorh1 ~ pGeneral sibling

O que é Model-View-Controller (MVC) É um padrão de arquitetura de aplicações  que divide a aplicação em três camadas: a visão (view), o modelo (model), e o controlador (controller). Traduzido para o português, a expressão significa: modelo-visão-controlador. O padrão MVC foi desenvolvido em 1979 por Trygve Reenskaug com a finalidade de ser utilizado como arquitetura para aplicativos desketop. Entretanto, o padrão se popularizou para uso em sistemas web, a partir da adesão de milhares de Frameworks de mercado.   O que é Arquitetura de Aplicação A arquitetura de uma aplicação nada mais é do que um modelo que define as suas estruturas. Tal estrutrua engloba: componentes de software, propriedades dos componentes / elementos, os relacionamento entre os componentes / elementos, e , enfim, todos os elementos que fazem parte da estrutura básica padrão do software e como estes elementos interagem / interagem entre si. Alguns exemplos de elementos: utilitários, elementos de interação, elementos de conexão, elementos de persistência. Existem arquiteturas padrão de mercado e arquiteturas específicas, criadas e usadas por empresas que desenvolvem software (neste segundo caso, configura o papel de um arquiteto de software).  Model-View-Controller (MVC) na Prática Em termos práticas, e de forma resumida, utilizar do padão MVC significa:  Dividir a aplicação em camadas: uma da interface do usuário denominada View, uma para manipulação lógica de dados chamada Model, e uma terceira caama de fluxo da aplicação chamada Control) Criar a possibilidade de exibir uma mesma lógica de negócios através de várias interfaces.  Isolar a camada de negócios (Model) das demais camadas do sistema, de forma a facilitar a sustentabilidade do código A implementação do controlador deve permitir que esta camada receba os eventos da interface e e os converta em ações no modelo. As camadas do Modelo MVC   Camadas do Modelo MVC   A Camada View do MVC É a camada que exibe uma representação dos dados. É camada de interface com usuário (view). Também conhecida como cliente-side. Faz a exibição dos dados, utilizando-se de #HTML e/ou XML. É responsável por usar as informações modeladas para produzir interfaces de apresentação conforme a necessidade. A Camada Model do MVC   É a camada que contem a estrutura de dado atrás de uma parte específica da aplicação Usualmente portada em JSON. Responsável pela leitura manipulação e validação de dados, e também de suas validações. Responsável por tratar as regras de negócio.  Obtém os dados e os traduz em informações relevantes para serem exibidas pela View. Notifica a view e controler associados quando há uma mudança em seu estado.   A Camada Controller do MVC  É a camada de controle. Exerce o controle de qual model deverá ser aplicado e qual view será mostrado ao usuário. Podemos dizer que esta camada faz uma gerência das outras duas camadas. O controller manipula e roteia as requisições dos usuários. Interpreta as requisições submetidas pelo usuário e traduz em comandos que são enviados para o (Model) e/ou para a View) . Valida as requisições dos usuários de acordo com as regras de autenticação e autorização. Vantagens do Model-View-Controller (MVC) Melhor nível de sustentabilidade, pois facilita a manutenção da aplicação Melhor performance, graças a separação em camadas Fácil transformação da interface, sem que haja necessidade de modificar a camada de negócio Melhor desempenho e produtividade, graças a estrutura de pacotes modulares  A arquitetura modular permite aos desenvolvedores e designers trabalharem em paralelo Partes da aplicação podem ser modificadas sem a necessidade de alterar outras

O problema O browser realiza a renderização/análise do arquivo HTML na seguinte ordem: da esquerda para direita, de cima para baixo. Beleza! Nenhum problema quanto a isso. O problema surge quando ele encontra um <script> ao longo do documento, pois, por padrão, o browser pausa a análise do HTML e se dedica ao carregamento e execução do script. Por isso o JavaScript é considerado um “bloqueador de recursos” durante seu carregamento, pois ao encontrar um script, seja inline ou externo, o navegador bloqueia todo o processo até que todo esse script tenha sido baixado e finalizado sua execução. Essas paradas na renderização do HTML são bem problemáticas quando temos uma página com vários arquivos JavaScript para serem carregados, pois irá atrasar a execução do primeiro evento que irá “desenhar” a página web, mesmo quando o HTML não depende do carregamento desses scripts. Então, para solucionar isso temos o async e o defer, eles nos permitem gerenciar a ordem que os scripts externos devem ser buscados e executados, assim tornando opcional trabalhar com scripts bloqueantes.   Script (modo default) Suponha um simples <script src=”exemplo.js”></script>, sem atributos, ele será processado pelo browser conforme imagem abaixo: Async Um atributo booleano indicando que o navegador deve, se possível, executar o script assincronamente. Esse atributo não deve ser utilizado se o atributo src estiver ausente (ex. scripts embutidos). Se incluído, nesse caso, ele não terá nenhum efeito. [MDN] Ou seja, o async possibilita que o download do script seja feito de modo assíncrono, em paralelo com o HTML, assim o bloqueio só ocorre quando o download é finalizado, durante o período de execução do script. Defer Este atributo booleano está configurado para indicar a um navegador que o script deve ser executado após o documento ter sido analisado, mas antes de disparar DOMContentLoaded. [MDN] Assim como ocorre com o async, com o defer o download do script é feito de forma assíncrona, mas sua execução ocorre apenas quando todo o processo de renderização estiver concluído, como o prórpio nome desse atributo informa (to defer=adiar), ele “adia” algo, que no caso se refere a execução do script.   Quando e qual usar? Aí vai depender da situação, segue abaixo alguns pontos a serem levados em consideração na hora da escolha, eles foram baseados em uma postagem da Ire Aderinokun: # O elemento script está declarado no início ou no final do documento? Se estão sendo chamado no final do documento esses elementos script não tem muito o que bloquear, certo?! Nesse caso não se torna útil o uso do async e do defer. # O script é autônomo? Ele não depende de nenhum outro ou do DOM? Para arquivos de script que não dependem de outros arquivos e / ou não possuem dependências, o atributo async é particularmente útil. Como não nos importa exatamente em que ponto o arquivo é executado, o carregamento assíncrono é a opção mais adequada. # O script precisa que o DOM esteja totalmente carregado? Em muitos casos, o arquivo de script contém funcionalidade que requer interação com o DOM. Ou, pode ter uma dependência em outro arquivo incluído na página. Nesses casos, o DOM deve ser totalmente analisado antes do script ser executado. Normalmente, esse arquivo será colocado na parte inferior da página para garantir que tudo já tenha sido analisado. No entanto, em situações em que, por qualquer motivo, o arquivo em questão precisa ser colocado em outro lugar, o atributo de defer é o que deve ser utilizado.