Fallback CSS e JS para jQuery

Tela com os erros de carregamento do site do Materialize

E aí pessoas, tudo certo?

Se você achou esse post pelo Google, dificilmente você não sabe o que é fallback, mas para quem chegou aqui de outra forma, aí vai. Fallback é o termo que usamos para mitigar a falta de algum arquivo. Por exemplo, se você está usando um arquivo em um CDN e por algum motivo esse arquivo não exista mais ou esteja com algum problema de acesso, nós testamos se alguma função desse arquivo funciona, se ela retornar um erro, a gente carrega esse arquivo localmente para que a experiência do usuário não seja afetada, afinal de contas ele não tem nada a ver com isso, certo?

Por que eu faria isso?

Mas aí você pode estar se perguntando: por que diabos eu me preocuparia com isso se eu já uso CDN, que de certa forma garante que tudo funcione sempre para mim? Ora, respondo eu mesmo: eu já fui estou “bloqueado” por CORS pelo jQuery por testar aplicações com o CDN em localhost. Isso faz com que eu não consiga usar os recursos que dependem de jQuery em sites que não tenham fallback. Um exemplo de site é o do Materialize, eu simplesmente não consigo acessar os menus (collapse). Mas felizmente uso IP dinâmico e assim que eu conseguir fazer com que alguém na operadora de internet entenda o que eu estou falando, eu trocarei o IP de borda.

Observe as mensagens de erro no console.

Tela com os erros de carregamento do site do Materialize
Captura de tela com erros de carregamento do Materialize

Failed to load resource: the server responded with a status of 403 (Forbidden)
jquery-3.2.1.min.js:1 Failed to load resource: the server responded with a status of 404 ()
jquery.timeago.min.js:1 Uncaught ReferenceError: jQuery is not defined
at jquery.timeago.min.js:1
at jquery.timeago.min.js:1
search.js:396 Uncaught ReferenceError: jQuery is not defined
at search.js:396
init.js:259 Uncaught ReferenceError: jQuery is not defined
at init.js:259

Fallback para Javascript

Para fazer com o que o seu usuário tenha a mesma experiência, garanta que ele consiga acessar o arquivo do seu próprio servidor, caso o CDN falhe.

Para o javascript fazemos isso testando alguma funcionalidade que só o arquivo js em questão contenha.

Coloque esse código antes da tag </body>.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>  window.jQuery || document.write('<script src="/content/js/libs/jquery-1.7.1.min.js"><\/script>')</script>

Observe que na primeira linha tentamos carregar o arquivo normalmente no CDN e na segunda linha testamos se a função window.jQuery existe, caso não exista a gente carrega o arquivo local. Obviamente, você precisa ter o arquivo salvo no seu servidor.

E o CSS?

Geralmente ocorre o mesmo com o CSS, mas como aplicar essa mesma lógica para o CSS, se ele é só uma folha de estilos?

.invisible {
       display: none;
}

Para fazer isso, nós vamos criar uma div invisível e verificar se ela realmente está invisível por exemplo.

Dentro do arquivo CSS que a gente quer testar, a gente deixa a div invisível

Depois, colocamos o elemento que vai nos ajudar a testar a funcionalidade no body da pagina

<div class="invisible"></div>

Por fim a gente usa uma função em Javascript / jQuery para verificar se o CSS definido no arquivo foi aplicado.

<script>
    // CSS Fallback
    $(function () {
        if ($('.invisible:first').is(':visible') === true) {
            $('<link rel="stylesheet" type="text/css" href="/assets/css/jquery.css" />').appendTo('head');
        }
    });
</script>

A lógica é a mesma, se o CSS não foi aplicado talvez o arquivo não foi carregado, então nós mesmos carregamos ele do nosso servidor local.

Conclusão

Basicamente a lógica é a mesma tanto para javascript quanto para CSS, a diferença é como fazer o teste. Fique atento que para testar o CSS você precisa do javascript e não necessariamente do jQuery, mas já que você já o carregou para outra tarefa, não custa usá-lo.

Vale lembrar também que essa lógica pode ser usada para qualquer arquivo, não apenas para o jQuery.

Referências

Mas por que ter esse trabalho se eu posso usar direto do meu sistema de aquivos e garantir a experiência do usuário da mesma forma?

Tem a ver com performance, cache e otimização de recursos do seu servidor. Falarei mais sobre isso em posts de performance, SEO e CDN em breve.

Espero ter ajudado! Grande abraço!

Compactação GZIP com Node.js

Introdução

Em tempos de servidores compartilhados onde cada recurso utilizado dói no bolso no final do mês, é muito importante compactar arquivos, seja para servi-los e economizar na transferência, seja para armazenar em disco. Existem algumas alternativas, uma delas é o Brotli, um projeto do Google que eu escrevi aqui, outra que também é suportada pela maioria dos navegadores é o GZIP e para isso existe uma ferramenta muito tranquila de implementar e que também pode ser utilizada no shell.

Solução

A ferramenta em questão é o Gzipme mantida por Caio Ribeiro Pereira sob licença MIT.

Implementação

No diretório do seu projeto, instale o pacote com o npm.

npm install gzipme
import gzipme from 'gzipme'

// Comprime "file.txt" para "file.txt.gz" no mesmo diretório.
gzipme("file.txt");

// Comprime "file.txt" e sobrescreve o arquivo "file.txt" no mesmo diretório
gzipme("file.txt", true);

// Comprime "file.txt" com o nome "compressed.txt" no mesmo diretório
gzipme("file.txt", "compressed.txt");

// Comprime "file.txt" usando o modo de "melhor" compressão (arquivo menor mas a compressão é lenta).
gzipme("file.txt", false, "best");

// Comprime "file.txt" usando o modo "rápido" de compressão (arquivo maior mas compressão rápida)
gzipme("file.txt", false, "fast");

Para usar  no shell do seu sistema operacional, basta instalar em modo global.

npm install -g gzipme

Os comandos são bem semelhantes às funções.

# O mesmo que 'gzipme("file.txt")'.
gzipme file.txt
# O mesmo que 'gzipme("file.txt", true)'.
gzipme -o file.txt
# O mesmo que 'gzipme("file.txt", "compressed.txt")'.
gzipme -O compressed.txt file.txt
# O mesmo que 'gzipme("file.txt", false, "best")'.
gzipme -c best file.txt
# O mesmo que 'gzipme("file.txt", false, "fast")'.
gzipme -c fast file.txt

É isso aí! Tente aplicar esse conhecimento conforme o seu projeto necessita 🙂

 

Grande abraço!

Compactando arquivos para a web com Brotli

Introdução

O assunto compactação normalmente é tratado na hora do deploy da aplicação, seja observando os relatórios de performance, como por exemplo o LigthHouse em caso de PWA ou seja simplesmente acessando o aplicativo e percebendo que ele está muito, as vezes muitooooo lento.

Fato é que esse assunto é o que envolve o maior número de engenheiros em empresas de desenvolvimento maiores e os navegadores já estão aptos à ajudar a resolver o problema e se não tiver, usa o GZIP mesmo.

 

A solução proposta aqui é o Brotli, um projeto Google que faz a compactação para você ter menos dores de cabeça com performance 🙂

Para usa-lo, utilize o gerenciador de pacotes do seu sistema operacional, eu estou usando um Ubuntu 16.04 LTS.

sudo apt-get install brotli

No caso de uma aplicação Angular, crie um arquivo no chamado Makefile no mesmo nível de onde está o seu package.json, copie o código abaixo e altere o que for necessário para adequar ao seu projeto.

build:
    ng build --prod --aot`

compress: 
    find dist -type f -exec sh -c "gzip < {} > {}.gz" \;
    find dist -type f -not -name "*.gz" -exec sh -c "bro --input {} --output {}.br" \;

Agora, executando os comandos make build no terminal, gera os arquivos de produção do Angular e o comando make compress gera os arquivos em GZIP e em BR (Brotli) compactados.

Não se preocupe que o seu servidor (Ngnx, Apache, etc) saberá o que fazer com eles 😀

Esse assunto sempre dá ibope, conte as suas experiências na seção de comentários…

 

Grande abraço!

Double screen – Comercial do Banco Sicredi

Screenshot de campanha de Natal do Banco Sicredi

E aí gurizada do café! Sussa?

Vocês víram? No Natal do ano passado, 2016, o Banco Sicredi inovou junto com a empresa DZ Estúdio e fizeram uma publicidade em “double screen”, isto é, ao entrar no endereço http://juntospelonatal.com.br/ no desktop e http://natal.am no celular, posicionar o dispositivo à direita do desktop, inserir o código fornecido, confirmar a execussão nos dos devices e curtir um show de inteligência, competência e criatividade.

Na minha experiência não ficou totalmente sincronizado, mas vamos e venhamos, alem do meu celular ser uma “lesma”, isso é bem complicadinho de sincronizar.

No passado empresas como a Samsung, se não me engano já usou essa técnica também com muita inteligência e também foi um sucesso, pelo menos no meu mundo nerd hehe

Confere lá, antes que saia do ar (eu não tiraria nunca…) pq eu estou atrasado e o bom velhinho já passou faz tempo… hehe

Tecniquês

Se você quer usar essa técnica, estude Javascript, HTML e alguma linguagem de servidor (PHP por exemplo). Se houver uma demanda legal, eu faço um tutorial.

Grande abraço!

Esse post foi escrito ao som de Pretinho Básico (Rádio Atlântida) e ao sabor de um bom café orgânico moído na hora e coadinho na xícara (sempre sem açúcar e bem forte 😉 #fikdik)