Many Drupal sites still load extra JavaScript libraries like jQuery UI and Popper.js for popups, tooltips, menus and animations. The good news: browsers can now do most of this on their own, with plain HTML and CSS.
In this session, I take four common Drupal UI pieces and build each one twice, first the usual JavaScript way, then the native browser way:
- A Views filter popup
- A tooltip
- A small help menu
- Showing more details of a product or service from a listing, without loading a new page
Then we compare them side by side: how much code each one needs, how it works with a keyboard, and how fast it feels on a regular Android phone.
You’ll go home with a simple “replace this with that” checklist, a Drupal theme example you can copy, and a clear idea of what’s safe to use today and what still needs a backup plan.
What you’ll learn:
- How to replace jQuery UI dialogs and Popper.js with the browser’s built-in dialog, popover and positioning features.
- How to show product or service details right inside a listing, with a smooth animation and no page reload or animation library.
- How to get keyboard support, Esc-to-close and reduced-motion settings working without extra code.
- How to check which features are safe to use today.
- How much faster and lighter your pages get on real phones.
- How to add all of this neatly in a Drupal theme.
Who it’s for: Drupal front-end developers and themers. If you’ve written a Twig template before, you’re good.