chrome

Automatizando a geração de certificados SSL locais para ambientes de desenvolvimento

Sabe aquele projeto que você está iniciando o desenvolvimento e já deixou tudo configurado pra ser acessado apenas via HTTPS no intuito de refletir como será em produção? Aí você configura um virtualhost para acessá-lo, mas ao entrar:

Essa é a imagem que melhor define o sentimento de “a pain in the ass“. A primeira coisa que a gente pensa é: e se eu gerar um certificado self-signed? Bem, pode resolver o problema no sentido do navegador te permitir acessar o domínio (com você colocando uma exceção pra ele), mas ainda assim, ele continua dizendo que a conexão não é segura:

E isso é uma coisa que incomoda pra caramba (pelo menos a mim :P). O problema é que os navegadores não conseguem reconhecer a autoridade de certificação de um certificado self-signed gerado da forma tradicional.

E, para criar uma CA (certificate authority) e adicioná-la na root store do sistema (onde os certificados são gerenciados. No caso do macOS isso é feito no software Keychain), não é algo tão trivial de se fazer, como você pode visualizar nesse tutorial aqui:

https://gist.github.com/KennedyTedesco/143576402fd7d9b49fbdedc9e417e5f9

Mas, e se eu te contar que tem uma ferramenta que abstrai toda essa dificuldade? Pois é! É o que veremos a seguir.

Antes, entretanto, é bom pontuar que esse artigo foi escrito para quem já tem o servidor web configurado com uma virtualhost, com o domínio em questão em /etc/hosts apontando para o host 127.0.0.1 e que agora precisa fazer um certificado local ser devidamente validado nos navegadores. O artigo não entrará em detalhes de configuração de servidor, configuração de aplicações etc.

Docker - Fundamentos
Curso de Docker - Fundamentos
CONHEÇA O CURSO

Gerando certificados SSL locais assinados com a mkcert

A mkcert é uma daquelas ferramentas indispensáveis para se montar um ambiente de desenvolvimento que dê gosto de trabalhar. Ela abstrai toda a dificuldade e complexidade de gerar certificados, como também de gerar uma CA (certificate authority) local. A única coisa que a mkcert não faz é instalar o certificado no seu servidor local, mas isso nem é algo tão complicado de se fazer.

Primeiro de tudo temos que instalar a ferramenta. Se você usa macOS, o Homebrew pode ser utilizado:

$ brew install mkcert

Se você usa Windows, você pode usar o gerenciador de pacotes Chocolatey:

$ choco install mkcert

Se você usa Linux, na documentação da mkcert mostra como pode ser feito.

Instalando a CA:

Para instalar a CA na root store, basta executar uma única vez:

$ mkcert -install

Criando o certificado:

$ mkcert teste.test "*.teste.test" www.teste.test

Nesse exemplo a ferramenta criará um certificado que será válido para o domínio teste.test e para todos os sub-domínios de primeiro nível dele.

O resultado da execução será:

~> mkcert teste.test "*.teste.test" www.teste.test
Using the local CA at "/Users/kennedytedesco/Library/Application Support/mkcert" ✨

Created a new certificate valid for the following names 📜
 - "teste.test"
 - "*.teste.test"
 - "www.teste.test"

Reminder: X.509 wildcards only go one level deep, so this won't match a.b.teste.test ℹ️

The certificate is at "./teste.test+2.pem" and the key at "./teste.test+2-key.pem" ✅

Tanto o certificado quanto a chave privada foram salvos no diretório do meu usuário. Tendo o certificado teste.test+2.pem e a chave privada dele teste.test+2-key.pem, já conseguimos configurar, por exemplo, o nginx para servi-los.

Configurando os certificados no Nginx

Agora, é preciso que você copie o certificado e a chave privada para o local onde o seu nginx consiga ter acesso para carregá-los. Você pode até renomeá-los se quiser.

No final do bloco server do virtualhost do seu projeto, basta adicionar o caminho para eles:

ssl_certificate /etc/nginx/ssl/teste.test.pem;
ssl_certificate_key /etc/nginx/ssl/teste.test.key.pem;  

Por exemplo:

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    index index.php;
    root /var/www/teste;

    server_name teste.test www.teste.test;
    access_log off;

    location / {
         try_files $uri $uri/ /index.php$is_args$args;
    }

    location ~ \.php$ {
        try_files $uri /index.php =404;
        fastcgi_pass php-fpm:9000;
        fastcgi_index index.php;
        fastcgi_buffers 16 16k;
        fastcgi_buffer_size 32k;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.ht {
        deny all;
    }

    ssl_certificate /etc/nginx/ssl/teste.test.pem;
    ssl_certificate_key /etc/nginx/ssl/teste.test.key.pem;  
}

No Apache seria algo como:

SSLEngine on
SSLCertificateFile "/private/etc/apache2/ssl/teste.test.pem"
SSLCertificateKeyFile "/private/etc/apache2/ssl/teste.test.key.pem"

Exemplo em funcionamento no Firefox:

Use e abuse da mkcert. Happy coding!

Ah, se você precisa gerar certificados SSL para o seu servidor em produção, veja esse artigo: Gerando certificados SSL gratuitos com Certbot.

Project Stream: Netflix de jogos da Google

Sabemos que a Netflix revolucionou o mercado de consumo de filmes e séries através da internet. Até pouco tempo atrás, era inimaginável que teríamos um serviço tão bom e que permitisse a comodidade de assistir Filmes e Séries sem sair de casa e a um toque do controle remoto de distância. Porém, o stream de vídeos é um pouco simples pois não há nenhuma interação dos dois lados, o vídeo é executado e exibido na sua TV.

Agora, imagine um jogo onde os comandos executados através do joystick tivessem que ser interpretados, executados no servidor e retornados para sua tela, tudo de forma remota… Complicado, né? Bom, segundo a Google, isso é possível e você só vai precisar do seu navegador para isso.

Administrador Google Cloud Júnior
Formação: Administrador Google Cloud Júnior
Nesta formação você aprenderá os conceitos fundamentais para trabalhar com cloud computing, além de conhecer na prática a lógica de trabalho no Google Cloud Platform (GCP) e seus principais serviços.
CONHEÇA A FORMAÇÃO

O que é o Project Stream?

Segundo a Google, o Project Stream é um serviço que visa facilitar a execução de jogos sem que seja necessário o usuário possuir um computador com grandes configurações, como placas de vídeo, processadores e memória ram de alto desempenho. Segundo Catherine Hsiao, product manager da Google, “Ao transmitir fimes ou séries, os usuários ficam confortáveis com alguns segundos de buffer antes de tudo começar.” Porém, para o streaming de jogos, esse buffer é inviável, já que alguns segundos de delay podem fazer toda a diferença para a experiência em sua jogatina.

Sendo assim, o Project Stream da Google visa possibilitar que os jogos possam ser executados diretamente dos seus servidores, porém tudo controlado a partir do computador do jogador.

Por onde jogar?

A idéia da Google é que todos os jogos que sejam disponíveis a partir da sua plataforma sejam executados diretamente do Google Chrome, seu navegador de internet. E porque isso é tão bom?
Primeiro, não precisamos instalar nada além do Chrome (que, talvez, já seja seu navegador principal). Segundo (e mais importante) é que, pelo Chrome ser multiplataforma, não estaremos mais presos a determinados sistemas operacionais, tudo poderá ser feito através do seu SO favorito (Windows, Linux ou MacOS):

Mas, e ai, funciona mesmo?

No dia 12 de outubro de 2018, a Google abriu seu projeto para open beta (qualquer usuário poderia testar, desde que morasse nos EUA 🙁 ) para testar com o novo Assassin’s Creed Odyssey, um jogo extremamente pesado. Dos vários relatos obtidos pela internet, a solução funciona muito bem, desde que você tenha uma internet de qualidade (cerca de 40 mbps), o que é totalmente compreensível. Também há alguns relatos negativos, porém, por ser um serviço beta, também é bem comum.

Concluindo

Com o Project Stream, a Google entra em um novo nincho de mercado, tentando revolucionar a forma de como os jogos são executados. Se até ontem você tinha que comprar um computador “parrudo” para conseguir jogar os principais lançamentos do momento, creio que isso está prestes a mudar!

Atalhos do Google Chrome que você precisa conhecer

O Google Chrome lidera como o navegador mais usado do mundo. Se você utiliza esse navegador, saiba que existe uma série de atalhos para que você acesse as funcionalidades de forma mais rápida, ao invés de acessar menus de ferramentas ou de ações por meio do mouse.

Geralmente os usuários conhecem os principais atalhos para ter mais velocidade em suas tarefas. Mas que tal aprender alguns novos?

Vamos lá!

MEAN 2 - JavaScript Full Stack
Curso de MEAN 2 - JavaScript Full Stack
CONHEÇA O CURSO

Reabrir abas fechadas

Utilizando o atalho Ctrl + Shift – T, você pode reabrir as abas fechadas recentemente. O Chrome lembra as últimas 10 abas que você fechou.

Abrir guia específica

Quando você tem diversas abas abertas, você pode ir até a guia desejada com o atalho Ctrl + número da guia (1 até 9). Por exemplo, o atalho Ctrl + 5 irá para a quinta aba da esquerda.

Ir para a aba seguinte ou anterior

Se você quiser ir para a aba seguinte da que você está, é só utilizar o comando Ctrl + Tab. Já para ir à aba anterior, o atalho é Ctrl + Shift + Tab.

Fechar aba

Você pode utilizar Ctrl + F4 para fechar uma aba. Imagine que você tenha muitas abas abertas, você não precisará ir até com o mouse na aba e procurar o pequeno “x”.

Ir para uma janela anônima

Se você precisa navegar sem deixar rastros você pode utilizar uma janela anônima, através do atalho Ctrl + Shift + N.

Complementar endereços

Para acrescentar “www” e “.com” ao endereço digitado, é só utilizar o Ctrl + Enter.

Adicionar página aos favoritos

Para adicionar a página atual nos seus favoritos, basta utilizar o atalho Ctrl + D. Já se quiser adicionar todas as abas abertas, Ctrl + Shift + D.

Abrir pasta de downloads

Com o Ctrl + J você abre uma aba contendo todos seus downloads.

Abrir o histórico

Para abrir o histórico de suas navegações é só utilizar o atalho Ctrl + H.

Gerenciador de tarefas

No gerenciador de tarefas do navegador você pode ver alguns dados, como por exemplo, quanto cada página está ocupando de memória. Basta utilizar o atalho Shift + Esc.

Selecionar endereço da página

É só utilizar o atalho Ctrl + L, que você já seleciona facilmente o endereço da página que você está.

Buscar um termo na página

Muitas vezes precisamos localizar algum nome em uma lista ou uma palavra específica em um grande texto. Com o atalho Ctrl + F é aberta uma caixa de texto para você digitar o que procura, se houver na página ele aparecerá para você selecionado.

Ver código-fonte da página

Se você é desenvolvedor provavelmente já precisou ver o código-fonte de alguma página. Para isso basta estar na página que deseja e utilizar o atalho Ctrl + U.

Aumentar e diminui texto

Se quiser aumentar o texto em uma página: Ctrl + “+”. Se deseja dimimuir: Ctrl + “-“. Se por acaso você tenha aumentado ou diminuido muito o texto e quer voltar para o tamanho padrão, só utilizar o Ctrl + 0 (zero).

Se precisar de mais alguma ajuda, você pode pedir ao próprio navegador pelo atalho F1.

Concluindo

Decorar todos de uma vez só é difícil, mas você pode ir praticando com os que mais tem utilidade para você. Assim daqui a pouco já vai ter decorado tudo sem perceber. =)

Até a próxima!

CSS - Sass
Curso de CSS - Sass
CONHEÇA O CURSO

Novidades do Chrome 63 para os desenvolvedores

Olá, Web Developers!

Veremos algumas novidades do Chrome 63, última versão do navegador a ser lançada em 2017.

Importação de módulos JavaScript dinâmicamente

Já faz um tempo que o JavaScript possui um modo nativo de importação de módulos, mas não faz tanto tempo que os navegadores começaram a dar suporte a essa funcionalidade.

O problema é que até pouco tempo, essa habilidade era estática.

Agora, com as mudanças no Chrome 63, podemos importar módulos em tempo de execução baseados em condições. Isso significa que, caso o usuário não precise do módulo, podemos evitar o seu carregamento.

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  });
});

No exemplo acima, o módulo só será carregado caso o usuário clique em um botão. Isso facilita aplicar a estratégia de Lazy Loading, melhorando a performance do carregamento da sua aplicação. Apenas o necessário será carregado no início e o resto será chamado apenas se for preciso.

Google Chrome Developer Tools
Curso de Google Chrome Developer Tools
CONHEÇA O CURSO

Sobrescrita do comportamento do overflow scroll com CSS

Em dispositivos móveis podemos usar o scroll para recarregar a página, como mostrado na imagem abaixo:

Recarregamento Mobile

Mas esta funcionalidade faz a página inteira ser recarregada, o que muitas vezes não é necessário. Agora é possível sobreescrever esse comportamento para criar uma funcionalidade igual a de certos aplicativos, onde fazemos o scroll apenas para carregar mais conteúdo (ou atualizar apenas uma parte da página). É o que a PWA (Progressive Web App) do Twitter está fazendo atualmente. Ao invés de recarregar a página, ele adiciona novos tweets à página.

Para isso nós usamos a propriedade CSS overscroll-behavior.

Na imagem abaixo, evitamos o recarrgamento total da página para implementar nosso próprio reload. Neste exemplo, ao invés de recarregar toda a página, apenas atualizaríamos a lista de emails.

Recarregamento Mobile Customizado

Mudança na interface de permissões

Mais de 90% de todas as requisições de permissões são ignoradas ou temporariamente bloqueadas.

É muito ruim para a experiência do usuário quando um site já pede permissões de notificação assim que você entra, sem contexto nenhum. Para diminuir isso, o Chrome 59 começou a bloquear temporariamente uma permissão caso o usuário a negasse três vezes.

Agora o Chrome 63 para Android fará requisições em modais. Isso chamará mais a atenção do usuário, mas eles já aconselham para que os desenvolvedores exibam as requisições apenas em momentos que fazem sentido. Acredita-se que assim os usuários estarão 2,5x mais dispostos a aceitar uma permissão.

Device Memory API

A nova API JavaScript Device Memory nos ajuda a entender melhor o que está limitando a performance da sua página dando dicas sobre o total de memória RAM disponível no dispositivo do usuário.

Com isso, podemos adaptar algumas funcionalidades em tempo de execução para melhorar a experiência do usuário, assim como o YouTube altera a qualidade dos vídeos dependendo da velocidade da sua conexão.

Intl.PluralRules API

Essa API nos permite criar aplicações que entendem como aplicar regras de plural das palavras em diversas línguas dependendo do número aplicado. Essa API também pode ajudar com números ordinais.

Google Chrome Developer Tools
Curso de Google Chrome Developer Tools
CONHEÇA O CURSO