Issue #340 (Multiple classList, Testing, Vue Tools, Uncats)
You likely are familiar with the classList.add() and classList.remove() methods that allow you to easily manipulate class names on any HTML element. More than likely you've used these with a single class, but in case you didn't know, you can add or remove multiple class names in a single line using the following syntax:
element.classList.add('one', 'two', 'three');
element.classList.remove('one', 'two', 'three');
You just have to remember that each class is an individual string value (thus the quotes) and multiple strings are separated by commas, similar to an array. So you can't do: add('one, two, three').
Here's a CodePen demo that has two buttons on the page. The buttons remove or add three class names that are used to add styles to the main content element.
If some of you didn't know that these methods accept multiple class names, it's probably because a lot of developers avoided using this feature due to lack of support in Internet Explorer (shocking, I know). So as long as you don't care about pre-Edge Microsoft browsers, you're good to use these pretty much in any project.
Now on to this week's tools!
Testing and Debugging Tools
App visual management and AI-powered visual UI testing and monitoring software.
Complete website monitoring: from multiple locations, broken links and mixed content detection, and advanced SSL certificate reporting.
Chrome extension that inserts Pesticide CSS into the current page, outlining each element to better see placement on the page.
Auto test generation that uses AI to find and build your UI tests for you. Run a "Discovery" with every new release to identify any new tests.
An AWS Lambda function for serverless capturing screenshots of websites.
Stop wasting time checking out websites to see if something has changed. Every time a webpage changes, this tool calls your webhook with the scraped data.
Create and share bug reports right from the browser, with actionable feedback and integration with email and project management tools.
Open Source JSON/YAML linter. Improve the quality of your API descriptions, Kubernetes config, GitHub Actions, or any other JSON/YAML data.
A "time-travel" debugging tool to develop your React application by tracking, visualizing, and reverting state changes.
A user testing platform that turns your prototype into actionable insights from real users, bringing confidence to the design process.
Easy to use Vue.js components for interactive animations.
A collection of essential Vue Composition API utilities for Vue 2.x and 3.x.
Vue Container Query 2
Vue plugin for working with CSS container queries as easily as possible.
Everything you wish the HTML `select` element could do, wrapped up into a lightweight, extensible Vue component.
Router View Transition
A transition wrapper for router-view that's compatible with scrollBehavior. Makes it easy to correctly restore the scroll after the entering view is visible.
A responsive credit card form with smooth micro-interactions. Includes number formatting, validation, and automatic card type detection.
Open source Vue components system for your next project, based on TypeScript.
A plugin for Vue that helps you manage your app's metadata using Vue's built-in reactivity.
A Vue component library for showing a speedometer-like gauge using D3.js.
Easy-to-use component to build beautiful responsive timelines.
All-in-one prototyping tool (Mac, Windows, Linux) for Vue developers.
Prefetch links when they're visible in the viewport.
Simple web statistics. No tracking of personal data.
A web scraping API that handles proxies and headless browser for you, so you can focus on extracting the data you want, and nothing else.
A creative, collaborative platform for visual communication. Create eye-catching social media graphics, presentations, videos, and GIFs all in one place.
A simple authentication tool for developers. The easiest way to answer the question: "Does user-X control email address Y?"
An archivist browser controller that caches everything you browse. A library server with full text search to serve your archive.
Bring your slide decks to life with professional templates, smooth effects, and viewer analytics. An all-in-one platform for building and sharing beautiful presentations.
A lightning-fast visual sitemap builder. Create your site map and implement website development and content planning.
Photoshop for iOS
In case you missed it, Adobe Photoshop is now available for iPad.
The privacy-focused Chromium-based browser is now at version 1+.
All-in-one prototyping, animation, and design tool.
All-in-one easy-to-use online PDF tools. Convert, compress, rotate, eSign, and more.
A Tweet for Thought
Tuomas Salo with a short thread reminding us that maybe today's UI designs could learn a thing or two from Windows 95
Got a Tool Suggestion?
Made something? Send links via Direct Message on Twitter @WebToolsWeekly (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...
This is pretty cool: Extension Rank. It's a directory of browsers extensions, easily filterable by category (web dev, productivity, accessibility, etc.), by browser (Chrome, Firefox, Opera, Safari) and sorted by popularity.
Thanks to all for subscribing and reading!