Pusher

Vertical scaling, there’s gotta be a better way! Introducing Pusher. I’ve been using it for years; It is part of my core frontend toolset.

TLDR; Easily implement native vertical responsive scaling by creating on-the-fly GIFs via base64

Demo, documentation, code, etc is all at kirkstrobeck/pusher; Here is a not-going-to-be-updated copy of its current contents for this post.

Problem: Dynamic native vertical scaling is difficult. Poor solutions include JavaScript and CSS. By using images it can be easily accomplished with images, the building blocks of the web.

Images from day one have been the only element that respects aspect ratios. Taking advantage of this fact, you can use an image to reposition content in the vertical space, which makes responsive a breeze.

Even Twitter doesn’t get it :\

Usage

<img data-pusher data-width="200" data-height="100" />
// This would be the same (and will generate) 
// <img data-pusher data-width=”2" data-height=”1" />

• Use data-pusher as the selector
• data-width and data-height are the metrics that represent the intended aspect ratio

Features

• Automatically reduces the aspect ratio fraction of the desired size to its smallest implementation to optimize render time

I’m curious to see your implementation too, share it here if you’d like.