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.
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.
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.
For more information, I recommend the following resources: