|
Issue #487 • November 17, 2022
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:
|
<input type="text" autocomplete="on" id="name">
|
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
There's a whole list of possible values you can read about on MDN's reference. These are supposed to indicate to the user the format of the data that's expected, and therefore the browser is, in theory, supposed to 'recommend' values in line with the given attribute.
In all honesty, I haven't been able to see any difference in the autocomplete suggestions, regardless of which of these special values is used. As a related point, you might want to check out this Tweet from October 2020 by Tomek SuĊkowski where he demonstrates how to use the one-time-code value. While he does provide a live demo to try out, I personally don't see any functional difference between the demo and just using autocomplete with a value of "on".
If anyone has any experience using any of these specialized values, feel free to hit reply and enlighten me. Would love to see some of these in real-world usage!
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.
 |
mux-elements
A set of custom elements for working with media in the browser. Includes a video player, audio player, along with React equivalents, and more.
SmartShape
A polygon that can be attached to any HTML node to create interactive vector shapes for the web.
Content Parser
An online tool to instantly extract markdown, HTML, or text from content-heavy websites.
wc-pie-chart
A web component that displays simple pie charts or donut charts, based on data you plug into the component's attributes.
|
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.
Release
A minimalistic, opinionated, and predictable release automation tool. Think Prettier but for automated releases.
eslint-plugin-validate-jsx-nesting
An ESLint plugin to validate JSX nestings so that the rendered HTML doesn't have a different structure.
Electron Packager
A popular tool to package your Electron app into OS-specific bundles (.app, .exe, etc.) via JavaScript or the command line.
Fast Node Manager
A fast, simple, and cross-platform Node.js version manager, built in Rust, that works with .node-version and .nvmrc files.
On the Release Radar:
|
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.
Kill Bill
An open-source platform to automate your team's most complex billing problems.
Replit Mobile
Official iOS and Android apps for Replit, the popular code collaboration tool.
Dev Army Knife
A one-stop location for carrying out various dev-related tasks, including QR and barcode generators, cryptography tools, image compression, and more.
Konbert
An online data converter to convert files from Excel, CSV, TSV, JSON, and more to MySQL, PostgreSQL, SQLite, etc.
workerd
A JavaScript / WebAssembly server runtime based on the same code that powers Cloudflare Workers.
chatwoot
An open-source customer engagement suite built in Ruby, as an alternative to Intercom, Zendesk, Salesforce Service Cloud, etc.
|
|
Commercial Apps and Classifieds
These are commercial apps, affiliate links, PPC ads, and paid classifieds. Submit yours!
|
Sendfly – Add contact forms to your website with no back-end coding required.
|
|
Emailify – Design and export responsive HTML emails, directly from Figma.
|
Noom – A digital health platform that allows you to better understand yourself. AD
|
|
.ART Domains – Stand out in the creative community with .ART, the art world's favorite domain. AD
|
UX-App – No-code platform to create fully interactive prototypes with real HTML components.
|
|
Obsidian – A powerful knowledge base that works on top of your local folder of plain text files.
|
Loggify – A release note communication pipeline that integrates with many existing tools.
|
|
|
A Tweet for Thought
Suhail out here dropping truth bombs on Twitter.
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 everyone for subscribing and reading!
Keep tooling,
Louis
@WebToolsWeekly
PayPal.me/WebToolsWeekly
|
|
