|
Issue #566 • May 23, 2024
Support Web Tools Weekly via GitHub Sponsors
It's getting harder and harder to find viable advertising options for a small- to medium-sized newsletter like this one. If approximately 2,000 of my subscribers contributed $1 per month, it would be enough to keep things afloat without the need to seek out new commercial sponsors.
You can contribute to Web Tools Weekly by sponsoring me on GitHub with a one-time donation or a monthly sponsorship.
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.
All three newsletters I produce are basically a one-man operation, so my expenses can be covered with about 10% of the audience contributing at least $1 per month.
Sponsor Web Tools Weekly on GitHub →
|
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 & 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.
|
The Uncategorizables
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
ServBay – Install your PHP/Node.js web development environment in minutes, with no dependencies.
|
|
TLDR – A byte-sized version of Hacker News that takes just a few minutes to read. AD
|
Lightning – Code together, prototype, deploy, and host AI apps from the browser with zero setup.
|
|
App Backend – A backend solution for simple projects to integrate table data with external systems.
|
Techpresso – Join 100,000+ free daily readers for the latest AI and tech news, tools, and insights. AD
|
|
Anycode – A service that provides an autonomous AI to fix vulnerabilities, legacy code, and more.
|
Feather – A no-code platform to write content on Notion and publish to your SEO-friendly blog.
|
|
|
|
