Issue #289 (label clicks, Testing, Media, Uncats)01/31/19
Here's something interesting that you may not have realized: When a label element is clicked, a click event is triggered not only on the label element, but also on the associated form control.
For example, I have the following HTML:
The name field is associated with the label by means of the for attribute. This is common practice to make forms more accessible and usable. So when the user clicks the label, the name field will be automatically focused.
With this in place, I'm going to set up two separate click handlers. One will display a message in the console when the click event is triggered on the label, while the other handler will display a message in the console when the click event is triggered on the input.
Here's a CodePen demo where you can try it.
Notice when you click the label, two messages are displayed in the console. One message for the label click and one message for the input click (even though technically the input was not clicked). The same holds true for tapping on mobile.
On the other hand, if you click (or tap) the input directly, you'll only get a click message for the input, not the label. If I change the click event to a focus event, then things work more as expected and I only get one message for each focus.
I'm assuming the purpose for this has to do with helping accessibility APIs and how they can be used with form elements. Whatever the case, just keep this in mind if you notice an unexpected click event firing on a form control.
MDN's article on labels explains this in the usage notes. Credit to this Tweet by Manuel Bieh for pointing it out.
Now on to this week's tools!
|Buy my brand new JS/DOM e-book in EPUB, PDF, MOBI format!
JS & DOM Tips Volume 3 >
Includes 54 tips + 3 long-form articles
Testing and Debugging Tools
Percy: Automated Visual UI Testing
Replace time-consuming manual QA to catch visual UI bugs automatically. Percy’s all-in-one visual testing platform makes it easy to review visual UI changes across browsers and responsive widths. sponsored via Syndicate
Script or bookmarklet that displays a performance metric bar on any web page, along with a neat little streaming FPS graph.
Chrome extension that adds a tab to your DevTools to help you debug React-GraphQL applications.
Simple A/B testing component for React.
Color blindness simulator. Drag and drop an image and choose from various options to simulate what it's like to be colorblind.
Now at version 1+ (details). Test runner for Node with a concise API, detailed error output, and more.
Simple CSS debugging tool that lets you add outlines to elements using the CTRL key or CTRL-SHIFT for all elements.
A simple app for checking the accessibility of text against the Web Content Accessibility Guidelines (WCAG).
CLI tool for checking whether React components conform to the Single Element Pattern (a set of rules/best practices to create consistent, reliable and maintainable components in React and other component-based libraries).
New site from Google that includes this tool to review a website's performance and get detailed guidance on how to improve it.
Wes Bos is Having a NEW YEAR Sale on all Courses:
SVG Gradient Map Filter
Online tool to create an SVG gradient map filter from given colors. You can use preset palettes or create your own.
A minimal set of modular, tested and useful React components for composing media player interfaces.
SVG-Powered component to easily create a placeholder loading graphic (like Facebook's cards loading).
Turn your articles into high-quality audio for your audience to listen while they’re busy multitasking or on the go.
Online tool to create your favicon or choose one from a small gallery of pre-designed options.
Online tool to create complex blob-like objects and export as SVG.
Online tool to resize images to best fit the standards for Facebook, Twitter, Instagram, LinkedIn, Pinterest, and more.
Essentials Icon Pack
Email required to download. A collection of 140 commonly used icons.
Library of cute, customizable illustrations. Ideal to give some personality to your React application. Pick an illustration and set the mood and it's done.
Recommended Reading for Developers
WP Migrate DB Pro
WordPress tool to keep local and live databases in sync.
Easy form endpoints to manage for your forms. Simple form back end platform for designers and developers. Generate an endpoint URL, update your HTML form tag and start collecting form submissions.
Traffic inspector and request bin to inspect your API traffic.
Browser that aims to recreate the best aspects of the classic Opera (12.x) UI.
WordPress plugin for Shutterstock stock images. Access Shutterstock images within WordPress.
Hosted service created to easily receive Webmentions on any web page (Webmentions are a simple way to notify any URL when you mention it on your site, like pingbacks).
Turn any website into a serverless API.
Node utility to upload files from an SFTP server to Amazon S3.
An ever-growing design library for WordPress's new block editor.
Wayback machine online downloader with CMS.
A collaborative multidimensional web-based spreadsheet service. Something between a regular spreadsheet and a multidimensional database.
Easily extract text and data from virtually any document.
Create interactive cloud diagrams. Helps you visualize the full picture of your infrastructure – in real time and at any scale.