https://github.com/malchata/the-lord-of-the-links

One input responsiveness demo to rule them all.
https://github.com/malchata/the-lord-of-the-links

Last synced: about 1 month ago
JSON representation

One input responsiveness demo to rule them all.

• Host: GitHub
• URL: https://github.com/malchata/the-lord-of-the-links
• Owner: malchata
• Created: 2022-06-06T18:02:12.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-06-14T23:40:22.000Z (over 1 year ago)
• Last Synced: 2024-10-15T13:41:03.429Z (3 months ago)
• Language: JavaScript
• Size: 1.39 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# The Lord of The Links

One input responsiveness demo to rule them all.

## What is this?

The [Interaction to Next Paint (INP) metric](https://web.dev/inp/) metric is an experimental responsiveness metric that records the total interaction latency of all click, tap, and keyboard events on a page. This input responsiveness demo is a companion toy app for the [Optimize INP guide on web.dev](https://web.dev/optimize-inp/) designed to help you profile and understand which phase of an interaction inputs are spending the most time.

## How do I run it?

Do the following:

1. `git clone [email protected]:malchata/the-lord-of-the-links.git` in a directory of your choosing.

2. `npm install`.

3. `npm run preview`.

4. Open your browser to `http://localhost:8080/` (assuming port 8080 is available).

## What next?

You'll see a simple page with a title graphic and a text input. The text input searches all pages available on the [Tolkien Gateway](http://www.tolkiengateway.net/wiki/Main_Page) by title. For example, type "numenor" or "elrond" and watch the results filter in as the information is requested from a back end API. As you interact with the demo, follow the instructions in the [Optimize INP](https://web.dev/optimize-inp/) guide.

## Debugger mode

To open the app's debugger, type "debug" into the search field to toggle it open. You'll see options for input throttling, generating synthetic main thread work, and toggling useful console logs.