Use HTML and/or CSS
A couple of weeks ago, I was working on a project for the Vanilla JS Academy. It's a script that uses the New York Times API to get and display today's top stories across multiple categories.
I needed to display each category in titlecase. My first thought was to use a helper function to convert the strings. And then I realized...
Duh! I can do this with CSS! 🤦♂️
All I needed to do was add a class to each category:
You can view the project on CodePen.
Pure HTML form validation
It's possible to validate your forms on the client side using pure HTML.
As explained in the MDN Web Docs:
Unfortunately, it's not quite up to scratch for accessibility (A11Y).
Instead, I recommend using Bouncer. It's a lightweight plugin that augments the native validation elements and attributes. It just works, out of the box, with all the necessary ARIA behaviours baked in.
IMPORTANT: You must always validate your forms on the server. Never rely on client-side validation alone.
Pure CSS lightbox
It's possible to use the
:target pseudo-class to create a pure CSS lightbox.
It sure is cool that this is possible, but I wouldn't use it. It works for mouse users, but not keyboard users. There are a lot of A11Y considerations for something like a modal dialog.
Instead, I would use tried and tested plugins that have these A11Y considerations baked in.
In this scenario, I would use the Accessible Modal Dialog by Scott O'Hara.
For more information, I recommend the following resources: