|
Issue #551 • February 8, 2024
Porkbun — #1 Domain Registrar in the Tech Industry
Porkbun is the favorite domain registrar for tech professionals and was named the #1 domain registrar by USA Today. They offer more than 500 domain extensions ranging from .com and .net to .tech, .dev, and .app so you can get the perfect domain name for your next project.
Backed by personalized support 265 days a year, every domain from Porkbun comes with freebies like SSL certificates, WHOIS privacy, DNS, URL forwarding, hosting trials, and more.
They also have a wide range of powerful hosting options like Easy WordPress and shared cPanel hosting plans to meet your needs.
Register Now →
|
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:
"The HTML DOM API is made up of the interfaces that define the functionality of each of the elements in HTML, as well as any supporting types and interfaces they rely upon."
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...
You probably use a lot of those generic ones all the time. You simply get a reference to the element, then you can access the property. Some are settable and others are read-only. There are also methods associated with that interface, like blur() and focus().
But you might forget that specific HTML elements have unique properties and methods associated with them. For example, the HTMLButtonElement interface has the following properties:
- HTMLButtonElement.form
- HTMLButtonElement.formMethod
- HTMLButtonElement.validationMessage
- HTMLButtonElement.labels
- among others...
Some of the above will also apply to other form elements. Similarly, the HTMLImageElement interface includes:
- 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.
|
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
Neon – A fully managed serverless cost-efficient Postgres with a generous free tier.
|
|
Bytes – A JavaScript newsletter that's informative & entertaining, for all levels of JS devs. AD
|
Cyan Stats – A simplified and privacy-focused Google Analytics alternative that's GDPR compliant.
|
|
AskYourDatabase – A ChatGPT-powered tool to allow you to chat with your database with no SQL.
|
Pointer – Handpicked articles from 100+ sources on what current and future engineering leaders read. AD
|
|
Sonar – A platform that provides a suite of linting, code quality, code security, and code review tools.
|
InfluxData – Manage all types of time series data in a single, purpose-built database, optimized for speed.
|
|
|
An X Post for Thought
Hard to disagree with this, but I think it's easier said than done.
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 ever need to do research on general stats about YouTube, you might want to bookmark TubeStats. It's described as "an interactive dashboard that provides users with up-to-date information about YouTube based on random sampling."
Thanks to everyone for subscribing and reading!
Keep tooling,
Louis
@LouisLazaris
PayPal.me/WebToolsWeekly
|
|
