pinch-zoom-element

This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan

<p>Jake and the team built this rather awesome custom element for managing pinch zooming on any set of HTML outside of the browser's own pinch-zoom dynamics (think mobile viewport zooming). The element was one of the central components that we needed for the <a href="https://squoosh.app/">squoosh</a> app that we built and released at Chrome Dev Summit (... I say 'released at Chrome Dev Summit' - Jake was showing it to everyone at the China Google Developer Day even though the rest of the team were under embargo ;) ... )</p> <blockquote> <p>install: <code>npm install --save-dev pinch-zoom-element</code></p> <div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-HTML" data-lang="HTML"><<span style="color:#f92672">pinch-zoom</span>> <<span style="color:#f92672">h1</span>>Hello!</<span style="color:#f92672">h1</span>> </<span style="color:#f92672">pinch-zoom</span>> </code></pre></div></blockquote> <p><a href="https://www.webcomponents.org/element/pinch-zoom-element">Read full post</a>.</p> <p>I just added it to my blog (took just a couple of minutes), you can check it out on my '<a href="https://paul.kinlan.me/life/img_20170711_063830/">life</a>' section where I share photos that I have taken. If you are on a touch-enabled device you can quickly pinch-zoom on the element, if you are using a track-pad that can handle multiple finger inputs that works too.</p> <p>This element is a great example of why I love web components as a model for creating user-interface components. The <code>pinch-zoom</code> element is just under 3kb on the wire (uncompressed) and minimal dependencies for building and it just does one job exceptionally well, without tying any custom application-level logic that would make it hard to use (I have some thoughts on UI logic vs App logic components that I will share based on my learning's from the Squoosh app).</p> <p>I would love to see elements like these get more awareness and usage, for example I could imagine that this element could replace or standardise the image zoom functionality that you see on many commerce sites and forever take away that pain from developers.</p>

This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan