Issue #540  (toggleAttribute, CSS/HTML, Testing, AI Tools)11/23/23

If you've manipulated HTML with JavaScript, you've likely heard of or used different attribute methods like getAttribute(), setAttribute(), hasAttribute(), and removeAttribute(). Those are all fairly common.

One that seems to have gone unnoticed is the toggleAttribute() method that is now part of the DOM spec. While the other methods have been supported in browsers basically forever, this one was more recent but still has been in use across all modern browsers for quite a few years now.

As the name suggests, this method provides an easy way to toggle an existing HTML attribute. That is, if the attribute exists it will be removed; if it doesn't exist, it will be added. Here's an example that assumes a button element is referenced in a btn variable and an input element is referenced in a myInput variable:

Note that I'm applying it to the disabled attribute. This is an example of what's called a Boolean attribute, meaning it's an attribute that doesn't take a value. While the toggleAttribute() method will technically work on any attribute (even one that has a value), it's most useful on Boolean attributes because those are either present or not present and don't depend on a value.

So in the above example, each time the button is clicked, the attribute will be added or removed.

That's the default behaviour of the method, but if you want you can "force" the method to either add or remove the attribute using an optional second parameter:

The second parameter, as shown above, can be either true or false. A value of "true" forces the toggle to only turn the attribute "on" if it happens to not exist. If it does exist, nothing changes. A value of "false" does the opposite, removing it if it exists and doing nothing if it doesn't exist.

You can try out all three above examples in this CodePen demo.

Whether the optional parameter is used, the method will return true if the attribute is present prior to the toggle and false if it's not.

Now on to this week's tools!
 

CSS and HTML Tools

HTML Bundler
A Webpack plugin that renders HTML templates with referenced source files of styles, scripts, images, etc.

Ribbon Shapes
A gallery of 100+ copy-pasteable pure CSS ribbons, with just about any ribbon style you can imagine included here.

Dominate Online This BFCM With Cloudways Exclusive Deals
Cloudways is a managed cloud hosting platform with an extensive feature set that allows you to scale effortlessly, boost site performance, and grow on a budget. Enjoy a FLAT 40% off on all plans for 4 months in this limited time offer. Start 3-day free trial today, no credit card required.     SPONSORED 

CSS to Tailwind Converter
An online tool to convert CSS rules to their Tailwind equivalents using Tailwind's utility classes.

Tailwind CSS Theme Variants
A Tailwind CSS plugin that registers variants for theming beyond just light and dark modes without needing custom properties.

browser-window
A small, themed, zero-dependency Web Component for creating demos with a fake Safari-esque browser window.

qr-code
A dependency-free, SVG-based web component that generates an animatable and customizable QR code.

Nightwind
An automatic, customizable, override-able Tailwind dark mode plugin with automatic dark gradients and smart color mappings.

@tailwindcss/container-queries
A plugin for Tailwind CSS v3.2+ that provides utilities for CSS container queries.

HTML Tags Memory Test
Start typing HTML tags to see how many you can remember. It's a lot harder than it looks as many common tags are easily forgotten without peeking at your code!
 

Testing and Debugging Tools

test262.fyi
An independent daily test262 (standard test suite) runner for many JavaScript engines (V8, SpiderMonkey, LibJS, etc).

Colour Contrast Checker
An online color contrast checker that lets you modify the background and foreground colors using HSL, also available as a Chrome extension.

The Smartest Use of Screentime Yet
With thousands of bite-sized lessons in math, data science, and CS, available on any device, Brilliant allows you to level up in just minutes a day. Make your free time count. Join over 10 million learners worldwide.    SPONSORED 

typejest
A TypeScript package that provides a Jest-like API for making assertions about types, to make sure everything is working as expected.

Fetchbook
A command-line tool designed to help you manage your collections of HTTP requests, based on the standard RequestInit object, and runs in TypeScript with bun.sh.

Scroll-Driven Animations Debugger
A Chrome extension for DevTools that lets you visualize and debug scroll-driven animations (i.e. parallax or similar).

Security Checkup
Security monitoring as a service, currently free and fully functional, to help you find vulnerabilities in your websites and apps.

PactumJS
A REST API testing tool to automate e2e, integration, contract, and component (or service-level) tests.

Maestro
An easy-to-use automation and testing framework for mobile apps, to easily define and test your mobile app flows.

Image BPP Calculator
Drag and drop an image file below to calculate its bits per pixel (bpp), based on a recent change to how Chrome is calculating Largest Contentful Paint.
 

ChatGPT and AI Tools

AI Anything
A Nuxt/Vue-based starter project that allows anyone to quickly create ChatGPT tools, with access to 100k+ icons and more.

ChatGPT Proxy
One-click deployment of the ChatGPT private proxy, powered by Next.js, with support for server-sent events (SSE).

ChatGPT for Search Engines
A browser extension (Chrome, Firefox, Edge) to display ChatGPT responses alongside Google, Bing, and DuckDuckGo search results.

The Smartest Use of Screentime Yet
With thousands of bite-sized lessons in math, data science, and CS, available on any device, Brilliant allows you to level up in just minutes a day. Make your free time count. Join over 10 million learners worldwide.     SPONSORED 

OpenAI Developer Platform
The official location for docs and tools related to OpenAI's ChatGPT and related technologies, 

Chatbox
A desktop client for multiple cutting-edge LLM models, available on Windows, Mac, and Linux.

Kombai
A new model trained to understand and code UI designs like humans. Prompt it with your design files to get high-quality UI code in one click per component. Free for developers in research preview.

AffordHunt
A curated selection of high-quality, budget-friendly AI and SaaS alternatives tailored for indie hackers.

GPTConsole
An advanced terminal that collaborates with you in real-time, from debugging to application generation, execute complex tasks through natural language commands directly from your command line.
 

Commercial Apps and Classifieds

An X Post for Thought

Harry Roberts provides a list of some "sensible defaults" for CSS applied to image elements. In the thread he offers a brief explanation of each of the lines in the code snippet.
   

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

Here's something new when it comes to accessibility: Accessible Numbers is a one-stop resource dedicated to helping present numbers and data in a way that's more accessible to a wider audience.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris