pinch-zoom-element

Jake e a equipe criaram esse elemento personalizado bastante impressionante para gerenciar o zoom de pinch em qualquer conjunto de HTML fora da própria dinâmica de zoom de pinça do navegador (pense no zoom da viewport móvel). O elemento foi um dos componentes centrais que precisávamos para o aplicativo squoosh que criamos e lançamos no Chrome Dev Summit (... eu digo "lançado no Chrome Dev Summit" - Jake estava mostrando para todos no Dia do Desenvolvedor do Google na China mesmo que o resto da equipe estivesse sob embargo;) ...)

install: npm install --save-dev pinch-zoom-element

<pinch-zoom>
  <h1>Hello!</h1>
</pinch-zoom>

Read full post .

Acabei de adicioná-lo ao meu blog (demorou apenas alguns minutos), você pode conferir na minha seção ' life ' onde eu compartilho fotos que tirei. Se você estiver em um dispositivo habilitado para toque, poderá aumentar rapidamente o zoom no elemento, se estiver usando um trackpad que possa manipular entradas de vários dedos que funcionem também.

Esse elemento é um ótimo exemplo do motivo pelo qual eu amo os componentes da web como um modelo para a criação de componentes da interface do usuário. O elemento pinch-zoom é de pouco menos de 3kb nas dependências wire (descompactado) e mínimas para compilar e faz apenas um trabalho excepcionalmente bem, sem vincular qualquer lógica de nível de aplicativo personalizado que dificultaria o uso (eu tenho alguns pensamentos sobre lógica de UI vs Componentes lógicos de aplicativos que compartilharei com base nos meus aprendizados do aplicativo Squoosh).

Eu adoraria ver elementos como estes obter mais consciência e uso, por exemplo, eu poderia imaginar que este elemento poderia substituir ou padronizar a funcionalidade de zoom de imagem que você vê em muitos sites de comércio e para sempre tirar essa dor dos desenvolvedores.

About Me: Paul Kinlan

I lead the Chrome Developer Relations team at Google.

We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.

Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.