Issue #551  (HTMLElement API, HTML/CSS, JSON/DB, Testing)02/08/24

A set of Web APIs that we may at times forget about is that consisting of the often unique APIs belonging to distinct HTML elements. MDN's reference has a specific page called the HTML DOM API that describes these.

As that document explains:

For example, this is a generic HTMLElement API (or interface) that has specific methods and properties associated with all HTML elements. This gives you access to properties like:

• HTMLElement.autofocus
• HTMLElement.dataset
• HTMLElement.hidden
• HTMLElement.innerText
• and so on...

• HTMLButtonElement​.form
• HTMLButtonElement​.formMethod
• HTMLButtonElement​.validationMessage
• HTMLButtonElement​.labels
• among others...

• HTMLImageElement​.alt
• HTMLImageElement​.complete
• HTMLImageElement​.naturalHeight
• HTMLImageElement​.sizes
• and so on...

You can click through to any of the individual element API pages and you'll find all sorts of properties you may not have seen before. One unique one is the HTMLQuoteElement (an interface for <blockquote>) that has one property: cite. There's all sorts of interesting properties listed on those pages, including of course obsolete ones, which aren't recommended for use but will probably keep working forever for backwards compatibility.

So next time you need to access various parts of a particular HTML element with JavaScript, check the interface reference for that element and see if there's a simple and likely cross-browser way to do what you want to do without reinventing the wheel.

Now on to this week's tools!

 

CSS and HTML Tools

Velvette — A small JavaScript library, proposed by the author as a future standard, that builds on the View Transitions API (for page and state transitions).

OOHTML — A set of features that extend standard HTML and the DOM to enable authoring modular, reusable and reactive markup.

loadership — An online configuration tool to create your own pure CSS loading animations. Choose from one of the dozen or so prebuilt loading animations then adjust the settings as needed.

Save $1 Off Your Domain Name — Porkbun has a user-friendly interface with no upsells so you don’t feel pressured into buying things you don’t need. Manage everything about your new domain in one place without having to hunt around. Get your next domain at Porkbun today.     SPONSORED 

CSS3D Clouds — Not a new tool but this is a demo for a tutorial showing how you can create animated WebGL-like 3D clouds with CSS and some JavaScript for interactivity.

CSSformalize — A CSS framework and interactive online tool to generate code for easily styling CSS forms. You can also choose from and customize existing dark and light themes for form elements.

htmldocs — An online document editor for creating and automating generation of PDF documents from HTML/CSS. No installation needed and includes templates for invoices, reports, resumes, legal documents, and more.

Palettify — A playground, based on shadcn-ui components, to experiment with UI color themes on real UI elements in real time. You can switch to dark or light mode and copy the theme tokens as CSS custom properties.

Autosize Textarea — A web component for an HTML textarea element that auto-resizes itself to fit the element's content.

Animotion — An online tool to create CSS animations visually, by dragging, resizing, rotating, clipping, and more, including a keyframes editor, a collection of ready-to-use animations, and 29 built-in easings.

JSON and Database Tools

JOSEDb — A JSON-based database that leverages JSON Object Signing and Encryption (JOSE) standards to provide a secure and flexible encrypted and signed key-value store for JSON objects.

Joist — An opinionated TypeScript ORM for Postgres, with the goal to bring ActiveRecord-level productivity to TypeScript projects.

SQLiteGPT — An SQL function for SQLite to directly query ChatGPT, currently can only be used in JavaScript projects.

monday.com — Your team's secret sauce to success is here. From concept to completion with monday.com helps you manage, automate, and streamline your projects effortlessly. It’s time to transform your work life. Start your free trial today.    SPONSORED 

Schema Generator — A web application designed to help you build and generate JSON-LD schema markup, to support all the schemas listed and supported by Google, for your websites to boost SEO rankings.

JSON Resume — An open-source initiative to create a JSON-based standard for résumés, specifically for use in developer résumés.

URL to JSON — Enter a URL and this tool will display the page's content in JSON format, including meta data like Open Graph media and content.

SQLSync — A Rust-based collaborative offline-first wrapper around SQLite designed to synchronize web application state between users, devices, and the edge.

lowstorage — A simple, zero-dependency, object pseudo-database for Cloudflare Workers using R2 bucket.

PostgREST — A standalone web server that turns your PostgreSQL database directly into a RESTful API. The structural constraints and permissions in the database determine the API endpoints and operations.
 

Advertisement

Testing and Debugging Tools

Bernard — A service that tests your website from top to bottom, making sure every link and resource is valid and working for your visitors. Free while in open Beta, up to 5 websites and 10k resources checked per day.

qryn — An all-in-one polyglot, lightweight, multi-standard drop-in monitoring and observability framework for logs, metrics, and traces.

Hero — A headless web browser built for scraping, powered by Chrome and can emulate any modern browser without being blocked.

Domain Digger — Enter a URL to get details on any domain, including DNS, WHOIS, certificates, and list of available subdomains.

monday.com — Your team's secret sauce to success is here. From concept to completion with monday.com helps you manage, automate, and streamline your projects effortlessly. It’s time to transform your work life. Start your free trial today.    SPONSORED 

Tearable Dots — A state tearing attempt tested against different global state solutions in React 18. "State tearing" is similar to "Screen tearing" where multiple frames of a video are drawn in a single image, but applied to state management.

WebGPU-Memory — Add this script to your page before you initialize WebGPU, allowing you to test how much WebGPU memory you're using in a given context.

Consola — An elegant console logger for Node.js and the browser that provides fancy output with fallback for minimal environments, support for tags, mocking, pluggable reporters, and more.

SMTP Debug — A unique 3-in-1 SMTP debugging tool to find out and resolve possible issues with SMTP connections with a basic SMTP test, SMTP proxy, or SMTP blackhole.

autoheal — An experimental AutoGPT CLI tool that automatically fixes your tests, providing GPT-powered test-driven development.
 

Commercial Apps and Classifieds