Advertisement
|
Support Web Tools Weekly via GitHub Sponsors If I could fund the newsletter primarily on contributions from readers, then I wouldn't have to ever seek out advertising and I could remove advertising from the newsletter completely. |
An interesting and somewhat new API that you might want to become familiar with is the Visual Viewport API. It's been around long enough that it's now considered "Widely Available" according to MDN's browser data. So it's safe to use and looks to be quite practical for dealing with layouts on different devices and zoom levels.
The Visual Viewport is defined as:
"...the visual portion of a screen excluding on-screen keyboards, areas outside of a pinch-zoom area, or any other on-screen artifact that doesn't scale with the dimensions of a page."
This improves on the concept of the general viewport (referred to as the Layout Viewport), which would include the things mentioned in that definition, basically amounting to everything currently visible on the page.
The primary interface you'll work with when using the Visual Viewport API is the VisualViewport object. This object has the properties offsetLeft, offsetTop, pageLeft, pageTop, width, height, and scale. These return various values that you can work with. The API also has two events: resize and scroll.
The MDN article for the VisualViewport object includes a couple of live demos you can try out. But take note that if you're going to test the 'zooming', you'll have to use a mobile devices that is able to pinch-zoom. As far as I can tell, just zooming on a desktop device doesn't trigger a change in the 'scale' property that's queried in the scripts on the demos. Here's one of the example code snippets, so you can get an idea how it works:
const bottomBar = document.getElementById("bottombar");
const viewport = window.visualViewport; function resizeHandler() { bottomBar.style.display = viewport.scale > 1.3 ? "none" : "block"; } window.visualViewport.addEventListener("resize", resizeHandler); |
The primary action in the above code is the ternary expression that switches the display of the bottom bar depending on the value of the VisualViewport.scale property (abbreviated as viewport.scale due to the use of the variable).
This interface can come in handy to hide unnecessary 'aside' content like sidebars, ads, stickied elements, and so on, depending on the zoom level. Definitely an API you'll want to utilize if you're working on layouts that need to be optimized for mobile viewing.
Now on to this week's tools!
JavaScript Libraries & FrameworksDBOS Transact — A transactional TypeScript framework that's reliable, simple, and easy to debug, for developing database-backed applications with built-in once-and-only-once code execution. Sampo-UI — A framework for building user interfaces for semantic portals. PanvasJS — A JavaScript framework based on the HTML canvas element that's a barebones game engine for making 2D video games practically from scratch with basic tools. goja — Not a JavaScript library but an implementation of ECMAScript 5.1 in pure Go, with emphasis on standards compliance and performance. Labyrinthos.js — A JavaScript procedural generator for mazes, terrains, and biomes, designed for game developers and professional hobbyists. |
Build Tools, Bundlers, etc.Earthly — A simple Go-based build framework with fast, repeatable builds and an instantly familiar syntax – like Dockerfile and Makefile had a baby. Kuto — A Node.js package that reduces your JavaScript download size by re-using code you've already shipped. Anytime Mailbox — Business starters, are you in need of a business address separate from your home? Anytime Mailbox provides a seamless solution, securing a private, professional address with added benefits like mail forwarding and scanning for ultimate convenience. SPONSORED Dioma — An elegant dependency injection container for vanilla JavaScript and TypeScript, with no decorators, no annotations, and no dependencies. JSR — An open-source package registry for modern JavaScript and TypeScript, to publish TypeScript source, while the registry handles generating API docs, .d.ts files, and transpiling your code for cross-runtime compatibility. TanStack Config — A seamless and intuitive configuration management system that simplifies the process of building and publishing high-quality JavaScript packages. typescript-eslint Playground — An online tool for working with typescript-eslint, the popular monorepo for tooling that enables ESLint and Prettier to support TypeScript. |
Advertisement
|
The Morning Paper for Hacker News Readers No sports. No politics. No weather. |
The UncategorizablesLatitude — An open-source framework for embedded analytics to create API endpoints on top of your db or warehouse using just SQL, and embed interactive visualizations natively in your favorite frontend framework or through an iframe. Casbin — An authorization library written in Go that supports access control models for Node.js, JavaScript, Ruby, Python, C/C++, Golang, Java, and more. Dewhale — Formerly called vx, a GitHub-powered AI, as an alternative to Vercel's v0, the tool to generate UIs from a text prompt. |
Commercial Apps & Classifieds
|
An X Post for ThoughtWhat's more difficult, picking a new coffee maker, or picking a JavaScript library?Send Me Your Tools!Made something? Reply to this email or send links via Direct Message on X @LouisLazaris (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email. Before I Go...If you want to practice your typing speed, try QWERTYTILES, a somewhat unnerving and challenging way to learn to type faster. They just keep falling! |