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!

Como testar o envio de e-mail sem ter um servidor de e-mails

E aí gurizada do café, tudo tranquilo?

Enquanto você desenvolvia uma aplicação, você já teve que testar o envio de e-mails e não tinha um servidor de emails para fazer isso? Ou tomou aquele sufoco para configurar e autenticar o seu servidor? Quem nunca?

Existe uma aplicação pra nos ajudar com esse pepino… o nome dela é jenifer, digo Mailtrap 🙂

Para começar a brincadeira você precisa fazer um cadastro super simples e que pode ser feito por login social (Google ou GitHub).
Até o dia em que eu postei esse texto, existem várias formas de contratação onde a diferença entre os planos é basicamente as quantidades das features, mas o que nos interessa por aqui é a conta free, não é mesmo?

A conta free te permite ter apenas um projeto configurado, uma mailbox, nenhum redirecionamento/encaminhamento, 500 mensagens e as mensagens são apagadas todo o mês. Perfeito pra gente que só quer testar a API 🙂

Após o cadastro você será redirecionado para a tela inicial com a sua mailbox já configurada. Nessa parte você só pode trocar o nome, se preferir… ou deletá-la.

Tela inicial do mailtrap com sua mailbox criada.

Ao clicar na mailbox, nese caso “Minha inbox”, você será redirecionado para a página inicial da sua mailbox.

Página principal da ferramenta mailtrap, contendo as configurações do serviço e mensagens

Aqui que a mágica acontece… nessa página você tem todas as informações para configurar na sua aplicação, seja ela desenvolvida em Node.js, PHP, Ruby on Rails, etc…

Depois de integrar na sua aplicação e testar, é só clicar nas mensagem que ficam no painel da esquerda e visualizá-las.

E aí, essa ferramenta parece útil para você? Comente aí em baixo se te ajudou e sugere alguma coisa que você gostaria de ver por aqui.

Grande abraço!

Easter Egg do Thanos no Google

Easter Egg do Thanos no Google

Não sei quem surpreende mais, o Google ou a Marvel. Na ocasião do lançamento do filme da Capitã Marvel, eu fiz um post sobre o site do filme que causou uma nostalgia tremenda nos programadores tiozões como eu, você pode conferir esse post aqui.

Se na vez da Capitã Marvel foi a vez da Marvel, agora é o Google quem surpreende. Vai lá, teste você mesmo! Entre no google, pesquise por thanos e clique na manopla…

Capitã Marvel causando nostalgia em desenvolvedores

E aí galerinha do café, tudo tranquilo?

O desenvolvimento web que conhecemos hoje tem um passado nebuloso… hehehe

Hoje em dia temos muita gente nova que provavelmente nem ouviu falar em MIcrosoft Frontpage (eca!), já que na época em que ele “resolvia” alguns problemas, a maioria do pessoal estava nascendo…

Na época, mesmo com uma baita ascensão da internet, programadores web eram vistos com desdenho por programadores desktop, que era o que mais havia. A frase mais comum era “PHP não é linguagem, é tecnologia”, “ASP é gambiarra”, “HTML só formata”, “progama em C que nem gente grande”, etc…

Fato é que a gente não dava muita bola (mesmo eu já programando em C também nessa época heheh) e desenvolvíamos coisas “incríveis” para os sites da escola, da turma, do condomínio, da família e para tudo o que mais poderia haver, sempre com muitos códigos copiados e alterados de diversos tutoriais e upados com o velho FTP.

Recentemente,  iria fazer um comparativo de sites que eu fazia na época para os que rola hoje (a diferença é enorme!!!) para uma talk que fiz na trilha Inspire do TDC, mas a Marvel resolveu isso pra mim. Como o filme da Capitã Marvel rola nos anos 90, eles fizeram o site oficial bem do jeitinho – horrível – que a gente fazia na época. Isso deu uma baita nostalgia!

Confere lá: https://www.marvel.com/captainmarvel/

A web melhorou não é? hehehe

Valeu, grande abraço!

Como remover a senha de uma planilha do Excel xlsx

E aí galera do café, tranquilo?

Post rápido para salvar aquela planilha com a senha perdida 😉

Aproveitem!

 

Este método somente aplica-se a planilhas protegidas por senha. Se o arquivo está protegido com o recurso “Encriptar com uma senha”, ele não funcionará.

  1. Abra o Windows Explorer e habilite a exibição de extensão de arquivos conhecidas. Para isso, pressione a tecla para exibir os menus superiores e entre no menu Ferramenta > Opções de pasta
    Na aba Modo de Exibição, desmarque a caixa Ocultar a extensão dos tipos de arquivo conhecidos e clique em OK.
  2. Altere a extensão do arquivo de .XLSX para .ZIP
  3. Extraia o arquivo para um diretório com o seu extrator favorito (Winzip, 7-zip, tar, etc)
  4. Entre no subdiretório xl e depois em worksheet que você acabou de extrair
    Deverá ter um ou mais arquivos com nomes como: sheet1.xml (sheet2.xml, etc. Eles representam as planilhas que você tem no seu arquivo.
  5. Dentro de cada um destes arquivos terá uma tag XML: <sheetProtection password=… />. Delete esta tag XML inteira usando um editor de texto (como o Bloco de notas, Visual Studio Code, etc).
  6. Re-zip os arquivos novamente.
  7. Renomeie o arquivo de .ZIP para .XLSX

E era isso!
Escrevam aí como foi a experiência de vocês com esse método…

Grande abraço!

Fonte

How to unprotect a password protected .XLSX file – Adam’s Code Blog – http://blog.bitcollectors.com/adam/2011/10/how-to-unprotect-a-password-protected-xlsx-file/

O que é um RANSONWARE?

Ransonware é um tipo de malware que ao ser infectado, explorando uma brecha de segurança do sistema operacional, encripta os dados e pede resgate sobre eles, ao pagar o resgate, uma chave lhe é enviada para que os dados sejam descriptografados.

Mas quem garante que você não será infectado novamente? Sua empresa está protegida?

Conheça os serviços da MisselSoft para lhe auxiliar nesse assunto. Não corra riscos desnecessários. Conte conosco!

 

Grande abraço.

Novo ransonware identificado. Sua empresa está protegida?

Ontem, dia 27 de Junho de 2017, foi identificado um novo RANSONWARE que atacou diversos países na Europa e também os EUA, fazendo um grande estrago em diversas empresas gigantescas, desde o setor de transporte e logístiga, passando por mineradoras de ferro chegando até a distribuição de energia, inclusive derrubando o sistema de monitoramento da usina nuclear de Chernobyl.

Diferente do Wannacry, disseminado e “exterminado” em meados de maio desse ano, o Petwrap, uma variação do ransomware Petya, não pode ser descriptografado, pois o provedor de emails desativou a conta que recebe os comprovantes dos pagamentos de Bitcoins.

A maioria das empresas estão vulneráveis a essa e outros tipos de ameaças. A sua empresa está protegida?

A MisselSoft pode te ajudar com essa tarefa, não corra riscos desnecessários, entre em contato conosco.

 

Grande abraço!

 

Fonte: TI Inside Online

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)

Tour nos datacenters da Google Streetview

E ai galera do café!

Se você está passando por aqui certamente você gosta de tecnologia e hoje em dia em se tratando de tecnologia não podemos deixar de falar em Google.

Estava passeando peloYoutube quando encontrei um vídeo que mostrava o interior dos datacenters do Google, ai foi fácil perder alguns minutos passeando por lá.

Se você quiser conferir, entra lá http://www.google.com/about/datacenters/inside/streetview/

Até a próxima 😉