Issue #487  (Autocomplete, CSS/HTML, Build Tools, Uncats)11/17/22

Turn Heads on Video with mmhmm Put yourself on screen with your slides. Move around for emphasis. Works with Zoom, Meet, and other video tools. No learning curve, no fancy equipment needed. Try mmhmm for Free

The autocomplete HTML attribute, commonly used on form elements to allow the user to autofill fields, is a bit of a quirky one that I'm not sure I fully understand.

First of all, the basic way to add autocomplete to any form field is as follows:

This uses a value of "on" for the autocomplete attribute, indicating that the browser is permitted to offer suggestions for the user. You can also set it to a value of "off", which I believe is like leaving out the attribute altogether.

The autocomplete suggestions, however, are based on the value of the id attribute (or name attribute, depending on which is used). If you plug this into a live demo and change the id to other values like "address" or "phone", you'll see that the browser will offer suggestions in line with the type of field being used.

Oddly, autocomplete doesn't seem to care what the field's "type" is. For example, you could change the type to "number" and keep the id as "name" and it will still recommend names that have been previously typed, even though none of them can be used.

MDN says regarding autocomplete: "It is available on <input> elements that take a text or numeric value as input, <textarea> elements, <select> elements, and <form> elements."

I understand how autocomplete can function on a parent form element. In that case, it will offer suggestions for different fields in the form. But how does autocomplete work on <select> elements and <textarea> elements?

A <select> element is based on the different values inside the dropdown (i.e. the values stored in the <option> elements). How does autocomplete 'fill' such values for the user? I'm really not sure.

And I've never seen a <textarea> element provide me with any kind of longform text suggestions. Again, how does autocomplete work on this field? In my own testing, nothing seems to happen when using autocomplete on a <textarea> element. So again, I'm puzzled.

One final thing I'll mention that also isn't fully clear how it's supposed to be used is the many other values that autocomplete can accept. These include apparently useful values like:

• name
• email
• one-time-code (for auth codes sent to the user)
• country
• cc-number (for credit cards)
• language
• sex

Now on to this week's tools!
 

CSS and HTML Tools

Turn Heads on Video with mmhmm
Put yourself on screen with your slides. Move around for emphasis. Works with Zoom, Meet, and other video tools. No learning curve, no fancy equipment needed.     SPONSORED  

Twix
A CSS-in-JS solution that allows you to style React components using Tailwind CSS classes.

MetaliCSS
A tiny, dependency-free JavaScript library that gives your elements a shiny, metallic look. You can try it out interactively on the page.

Tailwind CSS Variant Generator
An online generator that lets you produce 'variant' classes for Tailwind components. Similar to the idea of OOCSS where you have base styles, then the variations, to avoid repeating classes.

Devices.css
Modern electronic devices built with pure CSS. Includes smart phones, laptops, desktops, tablets, and smart watches.

html.to.design
Figma plugin to convert any website into a fully editable Figma design. Might be useful for inspiration from other sites or for tweaking the design of an older project.

Bolt.css
A class-less HTML framework that provides a set of opinionated but reasonable default styles for your HTML elements.

ColorKit
A set of 10+ tools and other color-related resources to help you build custom color palettes, explore gradients, generate shades, and lots more.

Build Tools, Bundlers, etc.

The Invisible Mobile App Revenue Thief
Reverse engineers can easily modify, repackage, and distribute modded versions of your freemium app. To stop users from bypassing premium features and blocking ads, join our webinar to learn practical mobile app security tips.    SPONSORED  

Hadmean
Generate powerful, fully functional, ready-to-be-deployed admin apps in seconds with no JavaScript, no SQL, no components, no tutorials, and zero maintenance.

Reflame
Provides a powerful toolset to deploy previews and production for React apps in milliseconds.

eslint-plugin-vue
Official ESLint plugin for use in Vue.js projects.

Yarn Lock Changes
Creates a comment inside pull requests with a human-readable summary of the changes to your yarn.lock file. Works in public and private repos with some optional customizations.

Turbo
An incremental bundler (the successor to Webpack) and build system optimized for JavaScript and TypeScript, written in Rust.

• CRACO – Configuration layer for Create React App, at version 7+
• patch-package — Fix broken node modules, now at version 6.5+
• Lerna – Tool for JavaScript monorepos, now at version 6+
• Bazel – Multi-lang build system at version 5+ (pre-release for v6/v7)
• lint-staged – Run linters on git staged files, now at version 13+
• Nx – Fast and extensible build system, now at version 15+

The Uncategorizables

The Invisible Mobile App Revenue Thief
Reverse engineers can easily modify, repackage, and distribute modded versions of your freemium app. To stop users from bypassing premium features and blocking ads, join our webinar to learn practical mobile app security tips.    SPONSORED  

Nabla
An isometric color font Inspired by vintage computer games.

Robot Framework
A generic open-source automation framework that can be used for test automation and robotic process automation (RPA).

SelfGuard
Encryption APIs and tooling to allow web2/3 developers to build enhanced and secure UI/UX.

Hack Club Sprig
Learn to code by making games in a JavaScript web-based game editor.

Runme
Use dev-native markdown to craft interactive runbooks for VS Code.

Commercial Apps and Classifieds

A Tweet for Thought

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

Someone finally built RunPee, a mobile app that tells you the best time to "run and pee" during a movie so you don’t miss the best scenes.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris