Web Tools Weekly Issue #467 (labels Property, CSS/HTML, Git/CLI, React)

Issue #467 (labels Property, CSS/HTML, Git/CLI, React)06/30/22

Here's something I just learned: All HTML input elements that can have an associated label have access to their associated labels via the DOM using a labels property.

The syntax looks like this:

console.log(el.labels[0].innerText);

The above assumes I've stored a reference to a form element in the "el" variable. Notice also that I'm accessing the first label associated with the element. This is because the value returned by the labels property is a node collection of all the labels associated with the element.

This is actually something I didn't know until I was reading up on this subject. A single form element can actually have more than one label. I suppose this might be useful in certain cases to make multiple areas on a page focus a form element.

In most cases, grabbing the first element in the collection (as I've done above) is probably the most logical thing to do, since most elements will only have a single label. This works on input elements, select elements, and even button elements.

As another little aside to this, normally a label is associated with a form input via its for attribute, which has to have the same value as the id attribute of the element its associated with. Thus the connection between the two. However, this isn't always required, as in this next example:

<label>My Input 2 <input type="text" class="inputs"></label>

Notice here there's no for attribute on the label and no id attribute on the input. But in a live example, the label would still be associated with the form input for accessibility and interactivity. This is because the label is wrapping the input (which isn't required). So the id/for association isn't necessary here. And even in this case, the label is still tied to the input when using the labels property.

You can try out a full demo on CodePen here. Click any of the three input elements and you'll see the associated label text displayed on the page. That text is accessed via the labels property.

And I should point out that each reference to a label in the labels collection is the DOM element itself, so you can pretty much do what you want once you have a reference to it.

Now on to this week's tools!

CSS and HTML Tools

Meet Filestack: The All-In-One File Handling Service
Filestack is the premier service designed to meet all your file handling needs, from improving upload speeds by a factor of 3.6 to providing swift and secure delivery. Give your app an instant upgrade today and download for free. SPONSORED

Bunny Fonts
An open-source privacy-friendly and GDPR-compliant drop-in alternative to Google Fonts. Currently includes 1400+ font families.

UI Buttons
100 modern CSS buttons featuring unique and interesting styles and mouseover effects.

Scroll Btween
A native JavaScript scroll library with no dependencies that lets you easily tween CSS values on a DOM element depending on its position in the viewport.

#HEXWORDS
A silly gallery of CSS hex colors that are also words. For example the well-known #BADA55 or other ones like #D155ED or #CABBED.

Maizzle
A utility framework that helps you quickly build HTML emails with Tailwind CSS and advanced, email-specific post-processing.

Grid Auto Fit for Tailwind CSS
Plugin that helps you create a responsive grid layout in Tailwind CSS without using media queries, via the `grid-template-columns: auto-fit` property/value.

CSS Generators
Some unique CSS code helpers that help you create custom borders, section dividers, starburst shapes, custom corners, polygons, and patterns.

CSS Shadow Gradients
A cool visual CSS generator that lets you build CSS shadows that are made using CSS gradients for a more unique shadow look.

Category Colors
A color palette generator for data visualizations, based on an article discussing the best colors to use for accessible visualizations.

Benjamin Moore Paints as CSS Colours
I'm not sure how Wes created this gallery, or if you'll ever need it, but here it is. It does have some nice shades though.

Allinone.tools
Yet another one-stop resource with tons of little utilities for formatting, editing, generating, minifying, and so on. This might be the largest of such collections I've seen.

TailwindCSS V3 Design System
A community Figma file that contains unofficial design system tokens for Tailwind CSS.

Git, GitHub, and CLI Tools

Repo Visualizer
An experimental GitHub Action that creates an SVG diagram of your GitHub repo.

Gitignore to Minimatch
Utility to convert gitignore patterns into minimatch patterns.

Bash-Oneliner
A collection of handy Bash One-Liners and terminal tricks for data processing and Linux system maintenance.

shot-scraper-template
Quickly create a new GitHub repository that takes automated screenshots of a web page using a Python-based tool called shot-scraper.

🔎 This week in VSCode.Email:

Customizing the minimap in VS Code
A black, elegant, and modern VS Code theme
JSDoc-powered type checking in VS Code

Check the archives for the latest issue, and subscribe for more!

React Tools

Mugshot Bot
Create stunning link previews automatically. No fussing with design tools or stock photos. Take control of how your products are displayed on social media and any messaging app. Create your free account today and get 1 month PRO for free [Promo: WebTools22]. SPONSORED

React-Uploady
Modern file-upload components and hooks for React, easy to get started by working out-of-the-box, but also configurable if needed.

react-comments-section
Package for integrating a fully functional comments section in React apps along with custom input fields.

react-cmdk
A package with components making it easier for you to build a command palette in your React app, allowing the user to open a 'drawer' with a keyboard shortcut.

React Holmes
Elementary state orchestrator for React where app state is decentralized between components, making it accessible in every part of application.

Glide Data Grid
A no-compromise, fast data grid for React, with rich rendering, first class accessibility, and full TypeScript support.

Fake Tweet
A React component that renders a custom, fake tweet on the page. I suppose you could use this for a real Tweet so you can preserve the Tweet even if it gets deleted.

react-transition-value
Animate or transition number values using easing functions in React.

Planby
A React based component for a quick implementation of an interactive, graphic timeline similar to a program guide on a streaming service, a music schedule, etc.

Crylic
Native Windows or Mac app that lets you visually edit React code, with no coding experience required.

React Awesome Shapes
A set of a dozen React components to insert different shapes into your app (e.g. circle, donut, diamond, star, etc).

On the Release Radar:

React DnD – Drag and drop for React now at version 16+
React Table Library – Table component now at version 4+
React-Menu – Accessible dropdown menus, etc., now at version 3+
Spectacle – React-based presentation library now at version 9+

Commercial Apps and Classifieds

These are commercial apps (i.e. not free or limited free plan), paid classifieds, and affiliate links.

Motion DevTools – Chrome ext. to create web animations with Motion One.

Tailwind.ws – Component-based Tailwind builder to create pages in minutes.

The Daily Upside – The most important and engaging stories in business. AD

Reflect – Makes regression tests easy to create and painless to maintain.

The Gist – Personal finance and investing insights in just 5 minutes. AD

Notion Forms – Embed, edit, and collect answers, all within Notion.

Typeface – A font manager for macOS with a minimal interface.

A Tweet for Thought

Dan Abramov started an interesting thread on client-side auth. If you are building apps with authentication, you might find the discussion useful.

Send Me Your Tools!

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

If you're looking for alternatives to different apps and services, you'll want to check out AlternativeTo. Includes reviews, comments, and recommendations so you can make an informed choice.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris