Responsive Images for Responsive Designs

Today we are going to talk about Responsive Images. Responsive Images is a very useful technique to make your designs look good regardless the user’s resolution screen.

Nowadays when we create our online projects we want it to look good on every device. Desktop, Mobile Phones, Tablets, you name it.

Responsive Images

With HTML you can use two different approaches to accomplish this and I will teach you how do implement it and how can you make it cross-browser and make it work with older browsers.

Why Responsive Images?

With responsive images you can delivery the image with the best fit for your user’s screen. Why delivery a 5mb image when you can delivery a 3kb image for your user that is accessing your website on his phone? Your user will see your content faster, will navigate through your content faster and will use a lot less bandwidth which will save you a few bucks.

  • Faster navigation.
  • Bandwidth savings.
  • Most of us don’t live in a world where we don’t have to care about 4G data consumption.

The <picture> element

The syntax like this:

See the Pen Responsive Images for Responsive Designs #1 by Igor Escobar (@igorescobar) on CodePen.

Notice in this example I’ve used ImageBoss to crop the smart crop the original image for desktop, tables and mobile phones. I’ve used it because I not only want to delivery images with proper sizes but they are also compressed and delivered with Progressive Scans.

Notice that you open the code pen above and resize your window the image will change it accordingly to your window size.

The <img> element with srcset and sizes attribute

If you don’t like the approach above you can also use the <img> tag with the srcset and sizes attribute.

See the Pen Responsive Images for Responsive Designs #2 by Igor Escobar (@igorescobar) on CodePen.

Browser Support

Notice that both the <picture> and <img> approach are only implemented on modern browsers as you can see on the image bellow:

More Info:

Cross-browser Responsive Images

If you are concerned on how this is going to work on old browser you can use a very cool project called Picturefill. It will basically wraps the W3C specifications for img and picture with javascript to make it work.

How to generate multiple images with for multiple screen sizes?

In this very post I’ve used ImageBoss to generate the images for all the devices I wanted. I didn’t need to generate all of them by myself and also didn’t need to code nothing specific for it. All I needed was to have my image stored some where and it did the heavy lifting.

Hope it helped!

Posts Relacionados:

I’ve had the chance to troll Donald Trump. But I didn’t.

The craziest thing that could possibly happen on my professional life as a Software Engineer happened on August 18th, 2016. That day I discovered that I could perform a massive Rick Roll attempt against the US presidential candidate Donald Trump.


The crazy story begins with an unexpected e-mail from a guy named Shu Uesugi – a San Francisco based Engineer currently working for EdSurge – asking for permission to mention my name and share to the world what he just discovered.

After reading his e-mail and his draft I was like:

The short story is that Donald Trump has a donate page which is using my open-source project jQuery Mask Plugin to guide his visitors on the tricky quest of filling up web forms – so far so good.

The shit hits the fan when the developer of his 2MM dollars website decides to include the minified version of jquery mask plugin file pointing directly to the demonstration page of my project (hosted in I have 100% control over this file and the developer simply injected the file on the page (instead of saving the file on his servers) and I could just replace or inject something nasty in it to make the most ambitious trolling attempt against the US presidential candidate.

Yet, in shock, I decided to share this with my personal friends on Facebook:

In only MY post I got 714 likes, 139 comments and an impressive 262 shares, hundreds of people randomly sending me friend requests, sending me messages on Twitter, Facebook and e-mails… giving me ideas and warning me about the window of opportunity that I got to do something about Trump. People really liked the possibilities of what Uesugi discovered . At the end of the post I asked for ideas of what each person would do if they were in my position – oh boy… that was fun!

All of the sudden I became some sort of super-man with a power that could change the world. People were like… DO IT! DO IT! Say something! Make a beautiful rain of penises with wings upon his website! And I was like… Wow… People really want to say something to this guy…

They even opened a hilarious pull request on their own, pure team work, in attempt to do something and hoping I’d merge it (sadly it was deleted).

The discovery was discussed everywhere:

After watching all this, receiving all those tweets, messages and emails showing nothing but pure hate love towards Trump. Of course, the bad news spreads fast and in a matter of hours the code on Trump’s website was fixed. People were in tears. e.g:

Screen Shot 2016-08-21 at 11.21.18 PM

Then I posted this on twitter:

Screen Shot 2016-08-21 at 11.18.18 PM

Yep. At the bottom of your heart you agree with me that this would be wrong. jQuery Mask Plugin is a serious project which took years of hard work and commitment to the community to build its reputation. I can’t just throw it all away for the public’s amusement. To make people laugh. To make a statement against someone – even if this someone is a US presidential candidate like Donald Trump.

Screen Shot 2016-08-21 at 11.22.27 PM

The true sad history behind this is that Donald Trump’s website cost 2MM dollars, they are using several open sourced projects like our jQuery Mask Plugin and they don’t even donated 1.00 freaking dollar in our donate page to support its development.

Posts Relacionados:

Working with Asterisk and Node.js

Screen Shot 2014-08-13 at 2.21.49 PM Screen Shot 2014-08-13 at 2.22.23 PM I’ve been working on a very cool project project here at Vale Presente which was able to provide a smooth interface to our call center attendees increasing their productivity and quality of our costumer service. The project was built with HTML5, CSS3, Javascript and Node.js as our backend engine (only cool stuff!). But the main challenge was finding the right tool to get the job done in a fast and consistent manner. I’m not going to talk about how I built the client. My focus here is talk about the tool I used to create a fast and consistent connection between the attendees and Asterisk. That was tough. There are a lot of libraries available over the Internet but most of them aren’t production ready.

Production ready

During my quest I had the pleasure to meet asterisk-manager. A Asterisk Manager Interface created by Philipp Dunkel which is a node.js module for interacting with the Asterisk Manager API. Nowdays I’m helping him as a maintainer of the project, improving, fixing bugs and helping to increase the project’s visibility. Not just because I’m a maintainer but because it works!

Currently the asterisk-manager module/package for node.js is handling incredibly well more than 500,000 asterisk events and ~5,000 voice calls a day. All of those events are being transmitted to our clients through This is a production ready and tested solution.

How to use it

Pretty simple. First you have to install it directly:

npm install asterisk-manager

Or put it inside of your package.json:

 "dependencies": {
    "asterisk-manager": "0.1.x"

Now you have to create a connection instance with your asterisk server:

var AsteriskManager = require('asterisk-manager')
  , ami = new AsteriskManager(config.asterisk.port,, config.asterisk.user, config.asterisk.password, true)

And that’s it! It works! Now you have to take a closer look inside of the available events and actions and have fun!


The list of all available events which is supported by Asterisk Manager API can be found here: How do I listen for any/all AMI events?

ami.on('managerevent', function(evt) {});

How do I listen for specific AMI events?

ami.on('hangup', function(evt) {});
ami.on('confbridgejoin', function(evt) {});

What if my connection dropped? You can listen to the connection events like:

ami.on('close', function(e) {});
ami.on('disconnect', function(e) {});
ami.on('connect', function(e) {});

And make your own decision on what do to next.


The list of all available actions supported by Asterisk Manager API can be found here: How do I call an action?

  'channel': "SIP/1234",
  'exten': '1143224321',
  'context': 'from-internal',
  'priority': '1'
}, function(err, res) {});

And that’s it! Have fun!

Github: NPM Repository: Bug Reports:

Posts Relacionados:

  • Nenhum post relacionado!

Using jQuery Mask Plugin with Zepto.js

Running jQuery Mask Plugin with Zepto.js Today I’m going to exemplify a pretty easy way to put jQuery Mask Plugin to run with Zepto.js instead of jQuery.

What is Zepto.js

Basically, you can switch from jQuery to Zepto.js if it’s too heavy or if it’s too much for your current needs. If you need something more lightweight that allows you to keep your code compatible with your old jQuery’s code, Zepto.js is a match for you.

Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible APIIf you use jQuery, you already know how to use Zepto. While 100% jQuery coverage is not a design goal, the APIs provided match their jQuery counterparts. The goal is to have a ~5-10k modular library that downloads and executes fast with a familiar and versatile API, so you can concentrate on getting stuff done.
Zepto.js Official Web Site

How to

Recently, Igor Lima made a pretty cool contribution to jQuery Mask Plugin making a few tweaks on jQuery Mask Plugin’s code to make it run smoothly with Zepto.js, making things even easier for you.

Since version 0.9.0 all you have to do is:

1 – Load zepto.js between your head TAG (or where ever you want to put it if you know what you’re doing):

<script type="text/javascript" src=""></script>

Load the Zepto.js data plugin right after Zepto.js:

<script type="text/javascript" src=""></script>

Zepto’s basic implementation of data() only stores strings. To store arbitrary objects the optional “data” module from custom build of Zepto was included.

And then load jQuery Mask Plugin:

<script type="text/javascript" src=""></script>

All you need to do now is take a look into jQuery Mask Plugin Documentation to learn a little about jQuery Mask Plugin’s API and you’re ready to go!

Did it help you? Support jQuery Mask Plugin!

Posts Relacionados:

Mascara Javascript para os novos telefones de São Paulo

Olá pessoal,

“O presidente da Anatel (Agência Nacional de Telecomunicações), João Rezende, informou nesta sexta-feira que o acréscimo do nono dígito aos números de celulares da região metropolitana de São Paulo vai garantir 53 milhões de novas combinações numéricas.”

Sabendo disso, é importante começarmos a pensar em soluções para atender as mascaras de telefone de todo o Brasil e também para região metropolitana de São Paulo.

Já faz uns meses que falei sobre o  jQuery Mask Plugin. E desta vez, também vamos resolver este mesmo problema com o ele. Criei um exemplo no jsFiddle de como resolver da mascara javascript com o novo nono dígito nos telefones celulares de São Paulo. Você pode ver o exemplo funcionando aqui:

E o código é este:

// using jQuery Mask Plugin v1.7.5
var maskBehavior = function (val) {
 return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
options = {onKeyPress: function(val, e, field, options) {
 field.mask(maskBehavior.apply({}, arguments), options);

$('.phone').mask(maskBehavior, options);

Desta forma, atendemos todos os números de telefone do Brasil e também atendemos a nova forma da Anatel para os telefones da região metropolitana de São Paulo, simples, certo? Ainda bem que tive a ideia de implementar estes eventos nas mascaras antes mesmo desta norma da Anatel 🙂

É isso, simples e objetivo!

UPDATE 10/10/2014

Eu e o @dgmike fizemos uma versão um pouco mais otimizada da solução apresentada pelo Bruno Porto em comentário:

Ajudou? Ajude no desenvolvimento do jQuery Mask Plugin

Click here to lend your support to: jQuery Mask Plugin and make a donation at !

Posts Relacionados:

Masks With jQuery Mask Plugin

Today is the oficial release of the version 0.4.3 of my jQuery Mask Plugin. Since I have never written about it before on this blog, I’ll teach you guys how to use it and some other cool features about it.

Downloading the code


The only thing that you guys need to do is include the javascript file of the plugin between the head tag in your HTML document and it’s all set to use.

The syntax

The jQuery Mask Plugin syntax is pretty simple. First, you input your  selector, followed by the .mask and then as a parameters you have to put the mask that you want the plugin to apply on the form field.


In this example the mask 00/00/0000 will be applied in all the input fields that have the “.date” class. At jQuery Mask Plugin you don’t have pre-established masks, you choose the mask as you wish. On the website project you can see the jQuery Mask Plugin running with some others examples like this:

  $('.date_time').mask('00/00/0000 00:00:00');
  $('.phone_with_ddd').mask('(00) 0000-0000');
  $('.phone_us').mask('(000) 000-0000');
  $('.mixed').mask('AAA 000-S0S');
  $('.cpf').mask('000.000.000-00', {reverse: true});
  $('.money').mask(',00', {reverse: true});

As you can see, it’s possible to define other data type on each digit of the mask. This mask for example:

$('.mixed').mask('AAA 000-S0S');

The user can type a sequence of three alpha numeric characters, followed by space, three numeric characters, a slash, one string character, other number character and finally one string character, cool isn’t it?

Again, you can define the mask as you wish and the data type of each digit of the mask as well.


  • Lightweight (~2kb minified, ~1kb gziped).
  • Masks on any HTML element!
  • data-mask attribute support.
  • String/Numeric/Alpha/Mixed masks.
  • Reverse mask support for masks on numeric fields.
  • Sanitization.
  • Optional digits.
  • Digits by range.
  • Automatic maxlength.
  • Advanced mask initialization.
  • Callbacks.
  • On-the-fly mask change.
  • Mask removal.
  • Customization.
  • Compatibility with Zepto.js

More about jQuery Mask Plugin

  1. jQuery Mask Plugin on Github
  2. Demonstration
  3. jQuery Mask Plugin
  4. All versions of jQuery Mask Plugin

Any problems, please, let me know.

Help us!

Posts Relacionados:

Mudando a barra de endereço do browser sem refresh

Hoje vamos falar sobre um recurso bastante interessante dos nossos browsers que nos permite fazer a alteração das informações das páginas que acessamos, inclusive a URL que é mostrada na barra de endereço do seu browser sem fazer o uso do refresh e o melhor: mantendo o histórico.

Manipulando o histórico do browser

Para se fazer o que é proposto neste post é preciso entender como funciona a manipulação do histórico do nosso browser e os métodos que o objeto DOM window nos proporciona para manipular o nosso histórico. Neste post vamos falar especificamente sobre o window.history.

W3C implementa History com a seguinte interface:

interface History {
  readonly attribute long length;
  readonly attribute any state;
  void go(optional long delta);
  void back();
  void forward();
  void pushState(any data, DOMString title, optional DOMString url);
  void replaceState(any data, DOMString title, optional DOMString url);

Neste post, vou falar somente somente os métodos pushState e replaceState que são os métodos responsáveis por manipular o histórico da sessão do seu navegador.

Sempre que você abre uma nova aba e/ou janela o navegador inicia uma nova sessão. E é nesta sessão que ele armazena todas as URL’s que você visitou.

Método history.pushState

O método pushState registra uma nova entrada no seu histórico de sessão, mantendo o histórico. E essa é a sua sintaxe:

window.history.pushState(data, title [, url ] )

Data: O parâmetro data pode ser útil caso você queira utilizar o evento onPopState. O evento onPopState é invocado sempre que uma nova entrada é registrada no seu histórico de sessão.
Title: É o título da página que você quer que esta entrada tenha.
URL: É a URL que você quer que a página tenha. Você pode utilizar este parametro de duas formas:

  1. Absoluta: Passando toda a nova URL completa, incluindo protocolo, host, path etc. Ex:
  2. Relativa: A URL que você passar será relativa a URL atual, ou seja, se você estiver acessando o e passar “/category/javascript/” a URL que será registrada é “”.


 window.history.pushState('Object', 'Categoria JavaScript', '/category/javascript/'); 

O resultado deste código vai fazer com que a URL e o título da página que você estiver navegando mude, sem que o refresh ocorra. E se você apertar o “voltar” no seu navegador, vai ver que ele vai voltar a página anterior que você tinha acessado, ou seja, o histórico foi mantido.

Método history.replaceState

O método replaceState é muito parecido com o pushState. A única diferença entre os dois métodos é que o pushState armazena uma nova entrada, mantendo o histórico. O replaceState não, ele substituí a entrada do histórico de sessão atual pelos dados que você passa. E essa é a sua sintaxe:

window.history.replaceState(data, title [, url ] )


window.history.replaceState('Object', 'Titulo da Página', '/outra-nova-url');

Evento onPopState

O evento onpopstate é invocado sempre que uma nova entrada é dada no histórico de sessão do seu browser. A forma como você pode utiliza-lo é só adaptar à sua necessidade de negócio. Uma forma de utilização deste evento é delegar para ele a responsabilidade de carregar via ajax todo o link que for clicado, por exemplo.

Exemplo de navegação sem refresh

Todo mundo já conhece o GitHub, certo? (espero que sim!) O GitHub faz do uso deste mesmo recurso para que vocês consigam visualizar os arquivos de um repositório de maneira rápida, sem refresh e mantendo um histórico da navegação. Veja que sempre que você clica em um arquivo, ele é carregado dentro do mesmo contexto, a url da página muda e você consegue ir para frente e voltar no histórico, graças ao método window.history.pushState.

Este é um exemplo de como seria a implementação de uma navegação parecida com jQuery.

$('#menu-nav a')​​.click(function(e){
  window.history.pushState({url: "" + $(this).attr('href') + ""}, $(this).attr('title') , $(this).attr('href'));

$(window).bind("popstate", function(e) {


Os browsers Chrome, Opera, Safari e Firefox 4+ implementam todos estes métodos de forma nativa. Os browsers antigos utilizam o location.hash para imitar o comportamento. Existe uma biblioteca chamada History.js que implementa esta funcionalidade de forma crossbrowser.


Posts Relacionados:

Mascaras com jQuery Mask Plugin

Hoje é o lançamento oficial da versão 0.4.3 do meu plugin jQuery Mask Plugin. Como nunca falei sobre ele aqui no blog, vou ensinar vocês como utiliza-lo e algumas features bacanas do plugin.

Baixando o código


A única coisa que vocês precisam fazer é incluir o plugin entre as tags do seu documento e pronto, o plugin está pronto para vocês utilizarem.

A sintaxe

A sintaxe do jQuery Mask Plugin é bem simples. Primeiro você passa o seletor, seguido de .mask e como parametro você vai passar a mascara que você quer que o campo tenha.


Neste exemplo, todos os input fields que possuem a classe “.date”, a mascara será aplicada. No jQuery Mask Plugin você não tem mascaras pré-estabelecidas. Você escolhe a mascara como você quiser. no site do projeto vocês podem ver o jQuery Mask Plugin funcionando e mais alguns outros exemplos, como os a seguir:

  $('.date_time').mask('00/00/0000 00:00:00');
  $('.phone_with_ddd').mask('(00) 0000-0000');
  $('.phone_us').mask('(000) 000-0000');
  $('.mixed').mask('AAA 000-S0S');
  $('.cpf').mask('000.000.000-00', {reverse: true});
  $('.money').mask(',00', {reverse: true});

Veja que que eu posso definir o tipo de dado que o usuário pode imputar a cada dígito. Nesta máscara por exemplo:

$('.mixed').mask('AAA 000-S0S');

O usuário poderá digitar uma sequência de 3 caracteres alpha números, seguido de espaço, seguido de 3 caracteres números, seguido de traço, seguido de um caractere do tipo string, seguido de um caractere do tipo inteiro e seguido de um caractere do tipo string, legal, né?

Vocês podem definir a mascara como quiserem e também podem definir o tipo de dado que pode ser inputado em cada dígito da mascara.


  • Lightweight (~2kb minified, ~1kb gziped).
  • Mascaras em qualquer elemento HTML.
  • suporte ao attribututo data-mask.
  • Mascaras com String/Numeros/Alpha-Numéricos/Mixed.
  • Suporte a mascara reversa para campos numéricos.
  • Sanitização.
  • Digitos Opcionais.
  • maxlength Automático.
  • Inicialização de mascara avançada.
  • Callbacks.
  • Mudança de mascara On-the-fly.
  • Remoção da mascara.
  • Customização.
  • Compatibilidade com Zepto.js

Mais sobre o jQuery Mask Plugin

  1. jQuery Mask Plugin no Github
  2. Página de demonstração
  3. Source-Code do jQuery Mask Plugin
  4. Todas as versões do jQuery Mask Plugin

Qualquer problema, por favor, me avisem.


Posts Relacionados:

Javascript – Aviso de Dados Não Salvos

Sabe quando você está escrevendo um e-mail e se você tenta sair de tela o browser te da um aviso, comunicando a possível perda de dados? pois é! sobre isso que vamos falar. 🙂 O Gmail faz isso, o Rally faz isso, mas muita gente ainda não sabe como isso é feito de fato.

Este tipo de recurso é muito interessante e pode evitar muita dor de cabeça por parte da pessoa que estiver utilizando o seu sistema. No meu caso, este recurso foi aplicado a um CMS. A finalidade da implantação deste recurso no CMS era para que os jornalistas fossem avisados quando algum dado no formulário fosse alterado, porém, o usuário intencionalmente (ou não) tenta mudar de página e este dado dado seria perdido. Se tratando de um CMS focado para jornalistas onde o conteúdo digitado é extremamente importante, todos recurso que for desenvolvido para evitar perda de conteúdo é extremamente bem-vindo.

onBeforeUnload Event

O evento onbeforeunload não tem uma finalidade exclusiva para ele, é um evento como outro qualquer, mas ele é invocado sempre que o usuário tenta sair da página atual, mas quando ele não está setado, simplesmente nada acontece. O evento responsável por pedir para que o usuário confirme ou não a mudança de pagina é o evento onbeforeunload. Sempre que ele é setado, você vai ver um confirm dialog, igual o da imagem abaixo.

Aviso de perda de conteúdo

O Problema

Se fosse só setar o efeito e ele fazia todo o resto, seria fácil, né? Pois é… mas não é assim (#lol). Temos que fazer um script peça a intervenção do usuário nas seguinte situações:

  1. Ao fechar aba/navegador.
  2. Ao clicar em qualquer outro link, senão o submit do formulário.
  3. O alerta deve aparecer somente se algo for alterado no formulário.

A Solução

  var formObject = $('.new_materia, .edit_materia');'original_serialized_form', formObject.serialize());

  $(':submit').click(function() {
    window.onbeforeunload = null;

  window.onbeforeunload = function() {
    if ('original_serialized_form') !== formObject.serialize()) {
      return "As mudanças deste formulário não foram salvas. Saindo desta página, todas as mudanças serão perdidas.";

Como funciona?

  1. Utilizei o $.data() do jQuery por que eu não gosto de utilizar o var para declarar variáveis globais.
  2. Utilizei o $.serialize() do jQuery para serializar o formulário para comparar o estado do formulário no futuro. E foi a forma mais inteligente que encontrei para identificar se algo realmente foi mudado no formulário.
  3. Por default, eu seto o evento onbeforeunload e dentro dele eu verifico se algo foi mudado no formulário.
  4. O único caso em que eu tenho que remover o evento onbeforeunload é quando existe a intenção de salvar o dado, no caso utilizei o :submit com evento $.click() para remover o evento e cancelar o alerta, caso houve a intenção de salvar o formulário.
Bom, é isso!
Dúvidas, sugestões, comentários are extremely encouraged.

Posts Relacionados:

jGallery – A jQuery Plugin for Image Gallery’s

Olá Pessoal!

Mais um projeto pessoal. Com a oportunidade de um novo trabalho surgiu o jGallery. Um cliente me pediu um plugin parecido com o Lightbox, porém, ele queria que as fotos aparecessem logo abaixo, como uma galeria de fotos onde o usuário pudesse navegar entre as fotos sem sair da famosa “lightbox”. A partir desta necessidade surgiu o jGallery. Um plugin feito em jQuery para exibir de forma elegante uma galeria de fotos.


  • Atalhos de teclado.
  • Se a imagem estourar a área útil do navegador a mesma é redimencionada de forma proporcional.
  • A galeria sempre se ajusta a sua resolução, inclusive a imagem (caso estoure a área útil).
  • Efeitos de transição.
  • Pre-loading de imagem.
  • Interface intuitiva e fácil de utilizar.
  • Compatibilidade com Internet Explorer, Chrome, Safari, Firefox e Opera (foi os que eu testei).




blog [at] igorescobar [dot] com

Posts Relacionados: