javascript – Blog do Missel
There are 5 posts tagged javascript (this is page 1 of 1).
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?
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.
Captura de tela com erros de carregamento do Materialize
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
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>  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.
Geralmente ocorre o mesmo com o CSS, mas como aplicar essa mesma lógica para o CSS, se ele é só uma folha de estilos?
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.
// CSS Fallback
if ($('.invisible:first').is(':visible') === true) {
$('<link rel="stylesheet" type="text/css" href="/assets/css/jquery.css" />').appendTo('head');
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.
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.
Tim James – http://timjames.me/jquery-and-jquery-ui-fallbacks/
Mozilla Developers – CSS Visibility – https://developer.mozilla.org/pt-BR/docs/Web/CSS/visibility
Google Code Dev Guide – http://code.google.com/apis/libraries/devguide.html#jquery
jQuery – http://code.jquery.com/
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.
in Geral |	814 Words | Comment
Double screen – Comercial 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
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.
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)