--- title: "Best practices for login and signup forms" publication: "Frontend Focus" issue: 594 published_at: "2023-05-24" canonical_url: "https://frontendfoc.us/issues/594" --- Plus why we're bad at CSS, and a look at a new API for 'popovers.' | Together with [![Frontend Masters logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_300,h_70/e_make_transparent/co_white,e_outline:5/nk0tfdvalivacz8rw7rt.png)](https://frontendmasters.com/courses/fullstack-v3/?utm_source=email&utm_medium=frontendfocus&utm_content=fullstackv3) #​594 — May 24, 2023 | [Read on the web](https://frontendfoc.us/issues/594) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1684931867/dqccj8k2sw55tlvkymfi.png)](https://developer.chrome.com/blog/introducing-popover-api/) [Introducing the `popover` API](https://developer.chrome.com/blog/introducing-popover-api/) — There’s a new set of declarative HTML APIs for building popovers on the way, and the first of which —_the `popover` API_ — is landing in Chromium 114. This post shows us how to use it when building tooltips, menus, and more. You're asking: Is this one of those Chrome/Edge-only experimental features for now? [Yes.](https://caniuse.com/?search=popover) But [MDN has docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/popover), Safari is tech previewing it, and it [may well take off.](https://github.com/openui/open-ui/issues/741) Una Kravets (Chrome Developers) [Eleven HTML Best Practices for Login and Signup Forms](https://evilmartians.com/chronicles/html-best-practices-for-login-and-signup-forms) — Andrey notes that “_even popular sites fail to implement_” the best practices highlighted in this article (such as `autocomplete`, focus states, validation, etc). There’s a quick checklist towards the end too. Andrey Sitnik [![\](https://copm.s3.amazonaws.com/5956bee4.png)](https://frontendmasters.com/courses/fullstack-v3/?utm_source=email&utm_medium=frontendfocus&utm_content=fullstackv3) [Full Stack for Front-End Engineers with Jem Young (Netflix)](https://frontendmasters.com/courses/fullstack-v3/?utm_source=email&utm_medium=frontendfocus&utm_content=fullstackv3) — Learn what it means to become a well-rounded full-stack engineer with this hands-on video course. You’ll dive into servers, work with the command line, understand networking and security, set up continuous integration and deployment, manage databases, build containers, and more. Frontend Masters sponsor [WebKit Features in Safari 16.5](https://webkit.org/blog/14154/webkit-features-in-safari-16-5/) — This version of Apple’s browser contains a handful of new features including CSS Nesting, [`:user-valid`](https://developer.mozilla.org/docs/Web/CSS/:user-valid) and [`:user-invalid`](https://developer.mozilla.org/docs/Web/CSS/:user-invalid) pseudo class support, Apple Pay changes, an update to cyber attack feature [Lockdown Mode](https://support.apple.com/en-us/HT212650), the usual bug fixes and more. [Here's the release notes](https://webkit.org/blog/14167/release-notes-for-safari-technology-preview-170/) for the latest version of Safari Technology Preview too. Jen Simmons (WebKit) ['Why We're Bad at CSS'](https://www.mikeaparicio.com/posts/2023-05-22-why-were-bad-at-css/) — “_We want our styles to be generic enough to reuse in different contexts but not so generic that we have to constantly repeat ourselves in those contexts_” — Mike explores how we may achieve this and improve things along the way, with a practical example. Mike Aparicio **⚡️ IN BRIEF** - 📅 Front-End Test Fest is [an upcoming _free_ virtual event](https://applitools.com/front-endtestfest-june-2023/) (taking place June 7) covering UI/UX testing, component testing, accessibility, and more. - Jim Nielsen is proposing a '[well-known URL](https://en.wikipedia.org/wiki/Well-known_URI)' specifically [for avatars](https://blog.jim-nielsen.com/2023/well-known-avatar/). "_Think Gravatar but on a web where your domain is your social handle_". - Use Sass? They're [seeking feedback](https://sass-lang.com/blog/rfc-embedded-protocol-2) on a new embedded protocol. - 😢 Pour one out for the `blink` element — it's [been removed](https://github.com/mdn/content/pull/26904) from MDN. 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1684934544/diosj0lb9lzbqi9n9eqg.png)](https://fullystacked.net/posts/linear/) [Using `linear()` for Better Animation](https://fullystacked.net/posts/linear/) — A good look at using the `linear()` easing function with CSS transitions, animations and the Web Animations API. Ollie Williams [The Rhythm of Your Screen](https://www.chrbutler.com/the-rhythm-of-your-screen) — Thoughts on scrolling, holding attention, information architecture, and achieving a rhythm to your page layout. Christopher Butler ℹ️ Paweł Grzybek has penned [a related tutorial on vertical rhythm](https://pawelgrzybek.com/vertical-rhythm-using-css-lh-and-rlh-units/), with a particular focus on how the `lh` and `rlh` CSS units can help achieve such harmonious layouts with consistent spacing. [Be Careful Using ‘Menu’](https://adrianroselli.com/2023/05/be-careful-using-menu.html) — Some cautionary advice on the use of the word ‘menu’ in your projects. Adrian warns us to be “_certain you have chosen the term that accurately describes the control you want_”. Adrian Roselli [We Built Our Documentation Using Docusaurus, React, and Vercel](https://www.courier.com/blog/how-we-built-our-documentation/?utm_campaign=q2-fy23-cooper-press&utm_source=email&utm_medium=frontend-newsletter-5-24-23&utm_content=documentation-blog) — It requires effort to produce great documentation. Effective documentation is fundamental to users getting started. courier.com sponsor [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1684920864/i78376o9277j7io03q4p.png)](https://chriscoyier.net/2023/05/12/add-opacity-to-an-existing-color/) [Add Opacity to an Existing Color](https://chriscoyier.net/2023/05/12/add-opacity-to-an-existing-color/) — Let’s say you have your brand color, and you want to find some nice complimentary opaque versions to go alongside it. What are your options? Chris runs through some approaches. Chris Coyier ▶[The New `dialog` HTML Element Changes Modals Forever](https://www.youtube.com/watch?v=ywtkJkxJsdg) — This 12-minute video highlights how the `dialog` element can be used to create accessible modals — and there's [a written version](https://blog.webdevsimplified.com/2023-04/html-dialog/) if you’d prefer. **But**..._[do you even need a modal](https://youdontneedamodalwindow.dev/)_? Kyle (Web Dev Simplified) [The Button Case - Using Custom Properties for a Smart Button System](https://utilitybend.com/blog/the-button-case-using-custom-properties-for-a-smart-button-system) — A look at using variables in CSS to create an efficient button system (_with just 20 lines of code thanks to custom properties_). Brecht De Ruyte [Updating My Website from My iPad](https://dddiaz.com/post/blog-from-ipad/) — A look at using GitHub Codespaces to both develop and push updates to a site, all from an iPad. Daniel Diaz ▶[Stop Rewriting Your CSS. Use `:not()` Instead](https://www.youtube.com/watch?v=WnUNMcy-YTs) — Useful stuff to know, especially as [`:not` is supported everywhere.](https://caniuse.com/?search=CSS%20%3Anot%28%29) Zoran Jambor [The Dangers of Google’s`.zip` TLD](https://medium.com/@bobbyrsec/the-dangers-of-googles-zip-tld-5e1e675e59a5) — What were they thinking? Bobbyr [The Acronyms of Rendering on the Web](https://whitep4nth3r.com/blog/the-acronyms-of-rendering/) — SSR, ISR, SSGs.. Salma Alam-Naylor 🧑‍💻 JOBS [Find Frontend Engineering Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-frontendfocus%29&utm_content=find-your-next-job) — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now. Hired 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1684921420/mtrg1afbvfd3cwyvjhli.png)](https://css-pattern.com/) [CSS Pattern: Fancy Backgrounds with CSS Gradients](https://css-pattern.com/) — A collection of nice background patterns, [now 100 strong](https://front-end.social/@css/110418448402714047), made with just CSS. Temani Afif [Scroll Btween: Use Scroll Position to Tween CSS Values on DOM Elements](https://olivier3lanc.github.io/Scroll-Btween/) — Scrolling/parallax libraries tend to feel the same but this one demonstrates some diverse examples with colors, images, and text — all with no dependencies. Olivier Blanc [Windstatic: A Set of 170+ Components & Layouts Made with Tailwind and Alpine.js](https://windstatic.com/) — Categorized under page sections, navigation, and forms, and each category includes multiple components you can drop into your Tailwind projects. Michael Andreuzza [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1684919831/pgjrkfspzugtggle98fb.png)](https://picyard.ubout.in/) [Picyard: Create Screenshots and Mockups with Beautiful Backgrounds](https://picyard.ubout.in/) — Has lots of different ways to customize including gradient backgrounds, shadows, dimensions, and you can even try out different kinds of mockups (testimonials, code snippets, etc). Krish Gohil [Strawberry: Zero-Dependency, Build-Free JavaScript Framework](https://18alan.space/strawberry/) — A tiny frontend framework positioned as an “alternative to vanilla JS” (isn't everything?) that offers reactivity and composability. 3KB gzipped. Alan [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/l4yfq1smydygqychnc03.jpg)](https://github.com/wooorm/starry-night) [Starry Night: GitHub-Like Syntax Highlighting](https://github.com/wooorm/starry-night) — GitHub’s own syntax highlighting approach isn’t open source, but this takes a similar approach. It’s admittedly quite heavy (due to using a WASM build of the Oniguruma regex engine) but if you want something with the same experience.. Titus Wormer 📬 **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://mastodon.social/@brandrick) & [Peter Cooper](https://twitter.com/cooperx86). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) [Ipx.](https://frontendfoc.us/open/594/*|UID|*?ipx=t)