DEV Community: Débora Nunes

# Como funciona os navegadores web?

Débora Nunes — Thu, 19 Aug 2021 13:49:35 +0000

Existem muitas coisas do nosso dia a dia que não pensamos sobre o funcionamento, quando iniciamos nossa carreira de tecnologia, às vezes, não temos tempo ou curiosidade, ou caminhos neuronais para entender algumas coisas por debaixo dos panos. Aprender o funcionamento dos navegadores foi assim para mim. O intuito desse post é trazer de maneira simples esse funcionamento e se tiver curiosidade, aconselho fortemente ler os links que eu indico ao final do post.

Quando pedimos algo ao servidor com o enter na URL, passamos por todos os processos apresentados nos últimos posts, e ao chegar essa resposta, começa o processo de renderização, cada tipo de código passa por analisadores diferentes, verificando sintaxe e as instruções daquele trecho do código, é criada uma árvore (algumas, na verdade) com esses atributos que são chamados nós e eles têm o papel de identificar o lugar, cor e características de cada componente. Caso os analisadores encontrem alguma inconsistência eles consideram o documento como inválido e dependendo da gravidade, não renderizam o componente ou até o site na tela.

O HTML por não ser uma gramática livre de contexto, não pode ser analisado facilmente, então durante a construção da árvore DOM ela é modificada algumas vezes durante o processo e existem algumas tolerâncias de sintaxe inválida.

Para mudanças dinâmicas, os navegadores tentam executar o mínimo de ações, usando a árvore, porém algumas modificações podem precisar de um recalculo de tudo, novo layout e nova pintura de toda a árvore, um exemplo disso seria a mudança de tamanho da fonte.

Além disso, cada navegador tem um motor de renderização diferente com especificidades e alguns consideram estilos pré-estilizados do usuário, fazendo com que desenvolvedores front-end não tenham um minuto de paz. risos.

Os navegadores evoluiriam muito, assim como as ferramentas para a criação de conteúdo dos mesmo, além dos sites cada vez mais dinâmicos, algumas das aplicações desktop que você utiliza no seu dia a dia, também utilizam motores dos navegadores, como Spotify, Discord e muitas outras.

Se você ficou interessado sobre navegadores:

Se você gostou do post, comenta algo que você sempre quis saber como funciona embaixo dos panos!

Quais são os principais métodos HTTP?

Débora Nunes — Sat, 14 Aug 2021 17:53:39 +0000

Partindo do pressuposto que você saiba o que é HTTP é necessário ver (ou rever) os métodos que compõem esse protocolo.

GET

Um método de recuperação de recursos (como o HEAD), pode ter parâmetros ou não, mas tem apenas o intuito de retornar os dados requisitados.

POST

É um método de alteração de recursos (como o PUT, PATCH, DELETE e OPTIONS), no POST algo é adicionado/anexado ao recurso especifico.

PUT

Os métodos de alteração do recurso PUT e PATCH são irmãos, sendo PUT o mais rígido, ele vai alterar tudo, substituindo pelas novas informações que forem passadas.

PATCH

Já o PATCH é o irmão light, ele vai alterar apenas parcialmente os atributos, não substituindo. É importante gravar a diferença entre os dois para utilizar o que encaixa melhor na sua proposta.

DELETE

O método mais fácil se entender e o mais perigoso usar, ele remove adequando-se aos parâmetros passados, cuidado com esse durante o desenvolvimento!

HEAD

Esse método retorna os recursos, como o GET, sem o corpo da resposta. Ele pode ser bem útil na hora de procurar um problema em um serviço externo, onde não há a necessidade do body.

OPTIONS

Considerado alterador de recursos, usado para mudar as opções de comunicação do recurso de destino.

CONNECT

Tanto o CONNECT quanto o TRACE são considerados métodos mais voltados para o ambiente. O CONNECT converte a requisição comunicação com o recurso estabelecendo um túnel.

TRACE

Executa um teste, também chamado loop-back, que permite observar os pontos de falha de um caminho até o recurso.

Esses são os mais conhecidos, porém não todos , existem muitos caminhos para aprofundar nesse assunto, o link que mais me ajudou a construir esse post: Guia de métodos HTTP, link que aparentemente tem todos os métodos HTTP ou para descobrir mais sobre as versões do HTTP.

O que é HTTP?

Débora Nunes — Tue, 20 Jul 2021 16:00:39 +0000

Depois de entender como a internet funciona , sabemos o quão importante é a conexão TCP/IP e a estrela de hoje se beneficia muito dela, porque para que o protocolo HTTP possa transferir seus dados é necessário a conexão entre cliente e servidores. Mesmo assim ela é conhecida como protocolo de texto sem conexão.

Primeiro, vamos dar nome aos bois. HTTP é a sigla para HyperText Transfer Protocol que é um protocolo (de transferência de hipertexto) usado para transferir dados pela WWW (World Wide Web) que seria o grupo de conteúdos transferido via internet. Essas siglas são bem familiares porque elas antecedem o nome da maior parte dos sites que visitamos e se você clicou para ver aqui no dev.to reparou que é HTTPS, uma extensão mais segura do HTTP, sendo o S de Secure, provavelmente a maioria dos sites que mais visitados hoje são HTTPS pois o Google mostra avisos de não seguro para sites HTTP.

Então, quando eu chamo o link de um site, eu crio uma requisição HTTP para o servidor que tem o conteúdo e espero a resposta, se o servidor tiver o conteúdo, ele manda e a conexão é desconectada, se não tiver o que pedi, ele vai responder que não tem e a conexão é desconectada. Pois isso um protocolo de texto "sem conexão".

Além do request e response tem outros nomes que se você vai trabalhar com HTTP, você precisa conhecer.

Estrutura do HTTP

Quando você pede um livro em uma biblioteca, existe um conjunto de informações necessárias para a bibliotecária conseguir te entregar exatamente o que você procura. Se pretende pegar um livro, o máximo de informações que você tem sobre aquele livro vão ajudar, mas são informações diferentes se você pretende na verdade mudar o livro que já tem, ou só devolver. No HTTP existem algumas maneiras de transmitir essas informações que podem ser transmitidas através do body, header e na url.

Na url temos duas maneiras, params e query string. Na url dev.to/deborafelix sendo /deborafelix um exemplo de params. Pensando de novo na biblioteca, um params poderia ser o nome de um gênero de livros, ou do autor. Agora o query string são os parâmetros após " ? " como quando pesquisamos algo no dev.to/search ?q=something.

O body e header não são tão visíveis. Sendo mais fácil visualizar essas informações durante o desenvolvimento, no postman, insomnia ou similares. Isso é muito bom quando é preciso enviar informações confidencias, como o token de autorização e o content-type, sendo o último o identificador para o tipo de dado enviado.

Se você está iniciando na área da programação, pode ter certeza que esses conceitos não serão esquecidos e falarei mais sobre eles em outros posts no futuro.

Links

Esses são os links que me ajudaram na construção desse post:

Alura
Rock Content
Oficina da net

Como a internet funciona?

Débora Nunes — Sun, 04 Jul 2021 15:52:04 +0000

Internet é algo que usamos todos os dias, mas nem todo mundo sabe como ela funciona ou pior, sabe, mas ainda não entendeu 😱

Partindo do contexto mais simples "uma rede de computadores mundial" que reflete claramente o símbolo escolhido para representar a internet 🌐. Mas quando pensamos o que é a internet na prática descobrimos alguns papeis fundamentais no processo:

Claro, existem outros serviços, como o 📌 VoIP e o 📌 P2P, mas a ideia é entender o básico primeiro.

Quando você envia uma mensagem através da internet, existe um identificador para onde aquele conteúdo precisa ir, através dos IP, seu dispositivo tem um, seu roteador outro e eles vão se completando, até o caminho final da sua mensagem 📌, e a resposta, faz o caminho inverso até você. O nome desse protocolo é TCP/IP, mas não é uma regra, muito do que usamos no dia a dia utiliza outros protocolos de comunicação como o UDP 📌, de forma bem resumida o TCP é mais confiável para no transporte de dados e o UDP é mais rápido, muito utilizado para streams e jogos online.

O identificador acaba sendo muito inviável de decorar, acabamos por decorar seu domínio, assim ao invés de chamar 142.250.218.110 podemos chamar google.com (que inclusive tem vários IP's diferentes para suportar o número de acessos).

Agora, você já está pronto para pesquisar mais sobre o assunto:

📌 Tech Mundo

📌 Developer