Issue #566  (Visual Viewport API, JS Libs, Build Tools, Uncats)05/23/24

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:

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 & Frameworks

DBOS 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.

Ollama.js — A JavaScript library that provides the easiest way to integrate your JavaScript project with Ollama, the popular native app to get up and running with large language models locally.

compromise — A JavaScript library for doing natural-language processing that "tries its best" to turn text into data by making limited and sensible decisions.

Support This Newsletter — This newsletter is a one-man operation and finding viable sponsors is getting more difficult in the current market. You can support the newsletter with a one-time donation via PayPal.    SPONSORED 

Mana Potion — A toolkit for JavaScript game development and interactive experiences that contains a collection of low-level utilities and helpers commonly needed when building games.

Tini — A small, fast, and interoperable framework for building Single Page Apps, Progressive Web Apps, or Desktop or Mobile Apps.

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.

TS Docs — An online tool that lets you browse type documentation for npm packages, just enter the name of a package to view the docs.

tshy — A hybrid (CommonJS/ESM) TypeScript node package builder that lets you write modules that just work in ESM and CommonJS, in easy mode.

Parcel REPL — A REPL or online playground for working with and learning to use Parcel, the popular zero-config build tool.

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 Uncateg­orizables

Latitude — 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.

Zenlogin — A service that enables AI-powered email notifications for every unusual login attempt on your website. Free plan includes 500 requests and 50 suspicious login emails per month.

SubQuery — An open-source, flexible, fast and universal data indexing framework for web3, to help developers create decentralized products.

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 

@docker/Windows — Run the Windows OS inside a Docker container, with more than a dozen versions of Windows available to choose from.

Placemark — A web-based tool for creating, editing, and visualizing map data, in a variety of formats including GeoJSON, KML, Shapefiles, CSV, and more.

dive — A Go-based tool for exploring a Docker image, layer contents, and discovering ways to shrink the size of your Docker/OCI image.

Wasmer — A blazing fast and secure WebAssembly runtime that enables incredibly lightweight containers to run anywhere, including desktop, the cloud, edge, and your browser.

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