👁 Viewport Events

Inline events are nice for quick and easy events which operate upon the idea of LOB. It's hard to beat the ease of use. However, it seems they were largely abandoned. Not sure why. I guess configuration can be strage in HTML?

Regardless, I whipped up this quick example to illustrate how it makes life much easier as a Utility first oriented developer.

How It works

I leveraged quite a few nifty Web APIs.

1. IntersectionObserver

   This API basically lets you know whenever an elements position on the viewport has changed. As you scroll elements, if you're observing them, you can determine a ton of details regarding their position. This is what we use to determine if we should be firing off our custom inline events.

2. MutationObserver

   As you add new elements to the page, how do to make sure you're monioring those elements for these custom inline events? This solves that issue, it'll check every new element and attach an (Intersection)observer if relevant.

3. Function()

   Takes a string, and some arguments and turns it into real JS without some of the issues things like eval, or script injection would introduce. This is what makes our custom inline events work under the hood.

Take it for a whirl!

Below there's a list with one <li.>. It's got a couple attributes. tailwind classes. An animate attribute which is just an attribute selector for our animate.css stylesheet to target. An on-reveal class which fires once when the element is brought into the viewport. An on-view-center attribute which fires when the element is in the center of the screen

The inline on-reveal code does two things. First, it loads the next element. Then, it animates itself into view via the [animate] attribute.

The inline on-view-center code replaces the title tag content with the content of the element.