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:
|
<form>
<label for="name">Name:</label>
<input id="name">
</form>
|
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
justice.js
Script or bookmarklet that displays a performance metric bar on any web page, along with a neat little streaming FPS graph.
Lucid
Chrome extension that adds a tab to your DevTools to help you debug React-GraphQL applications.
react-split-testing
Simple A/B testing component for React.
Coblis
Color blindness simulator. Drag and drop an image and choose from various options to simulate what it's like to be colorblind.
Clarity
By Microsoft. Get insights about how customers use your website. By adding some simple JavaScript to your page, get the ability to replay page views, view sessions and observe interactions.
Requestly
Chrome Extension to modify HTTP requests (set up redirects, run custom JavaScript, modify headers, modify network requests, etc).
AVA
Now at version 1+ (details). Test runner for Node with a concise API, detailed error output, and more.
DebuCSSer
Simple CSS debugging tool that lets you add outlines to elements using the CTRL key or CTRL-SHIFT for all elements.
Contraste
A simple app for checking the accessibility of text against the Web Content Accessibility Guidelines (WCAG).
Singel
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).
web.dev Measure
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:
|
Media Tools
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.
react-player-controls
A minimal set of modular, tested and useful React components for composing media player interfaces.
ReactContentLoader
SVG-Powered component to easily create a placeholder loading graphic (like Facebook's cards loading).
WebsiteVoice
Turn your articles into high-quality audio for your audience to listen while they’re busy multitasking or on the go.
Favicon Generator
Online tool to create your favicon or choose one from a small gallery of pre-designed options.
Blobmaker
Online tool to create complex blob-like objects and export as SVG.
Image Resizer
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.
React Kawaii
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.
d3-funnel
An extensible, open-source JavaScript library for rendering funnel charts using D3.js (for displaying data as charts, graphs, etc).
|
|
Recommended Reading for Developers
|
The Uncategorizables
WP Migrate DB Pro
WordPress tool to keep local and live databases in sync.
Getform
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.
CurlHub.io
Traffic inspector and request bin to inspect your API traffic.
Otter Browser
Browser that aims to recreate the best aspects of the classic Opera (12.x) UI.
ShutterPress
WordPress plugin for Shutterstock stock images. Access Shutterstock images within WordPress.
Webmention.io
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).
CloudQuery
Turn any website into a serverless API.
sftp-to-s3
Node utility to upload files from an SFTP server to Amazon S3.
Design Library
An ever-growing design library for WordPress's new block editor.
Archivarix
Wayback machine online downloader with CMS.
Egeria Spreadsheets
A collaborative multidimensional web-based spreadsheet service. Something between a regular spreadsheet and a multidimensional database.
Amazon Textract
Easily extract text and data from virtually any document.
Arcentry
Create interactive cloud diagrams. Helps you visualize the full picture of your infrastructure – in real time and at any scale.
|
|
