Issue #340 (Multiple classList, Testing, Vue Tools, Uncats)01/23/20
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
Test your JavaScript skills with the Toptal Speed Coding Challenge!
Toptal is looking for the top 3% of JavaScript engineers to join our global network of experts. Do you have what it takes? Compete with the world’s top talent and see how your skills stack up in the Speed Coding Challenge. ad via ThoughtLeaders
Applitools
App visual management and AI-powered visual UI testing and monitoring software.
Oh Dear!
Complete website monitoring: from multiple locations, broken links and mixed content detection, and advanced SSL certificate reporting.
Pesticide
Chrome extension that inserts Pesticide CSS into the current page, outlining each element to better see placement on the page.
Qanairy
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.
Chromda
An AWS Lambda function for serverless capturing screenshots of websites.
Monitoro
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.
Buglog
Create and share bug reports right from the browser, with actionable feedback and integration with email and project management tools.
Spectral
Open Source JSON/YAML linter. Improve the quality of your API descriptions, Kubernetes config, GitHub Actions, or any other JSON/YAML data.
Reactime
A "time-travel" debugging tool to develop your React application by tracking, visualizing, and reverting state changes.
Maze
A user testing platform that turns your prototype into actionable insights from real users, bringing confidence to the design process.
|
Vue Tools
Kinesis
Easy to use Vue.js components for interactive animations.
VueUse
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.
Vue Select
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.
vue-interactive-paycard
A responsive credit card form with smooth micro-interactions. Includes number formatting, validation, and automatic card type detection.
Equal
Open source Vue components system for your next project, based on TypeScript.
Vue Meta
A plugin for Vue that helps you manage your app's metadata using Vue's built-in reactivity.
vue-speedometer
A Vue component library for showing a speedometer-like gauge using D3.js.
Vue Timeline
Easy-to-use component to build beautiful responsive timelines.
PreVue
All-in-one prototyping tool (Mac, Windows, Linux) for Vue developers.
vue-router-prefetch
Prefetch links when they're visible in the viewport.
|
The Uncategorizables
GoatCounter
Simple web statistics. No tracking of personal data.
ScrapingBee
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.
Projector
A creative, collaborative platform for visual communication. Create eye-catching social media graphics, presentations, videos, and GIFs all in one place.
emauth
A simple authentication tool for developers. The easiest way to answer the question: "Does user-X control email address Y?"
22120
An archivist browser controller that caches everything you browse. A library server with full text search to serve your archive.
Sizle
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.
Octopus.do
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.
Brave
The privacy-focused Chromium-based browser is now at version 1+.
Drama
All-in-one prototyping, animation, and design tool.
Smallpdf.com
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!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
