yop

A small, silly experiment in text highlighting, recreation of https://fichtre.net/yop.html.

• Sample image in use is a graphite recreation of Pompeo Batoni's Allegory of Peace and War (1776).
• Sample text in use is an excerpt from John E. Gedo's article (2002) on the artwork.
• Font in use is Pantasia by Wei Huang.

Usage

• Visit the website and highlight the sample text to reveal the source image.
• Alternatively, you can provide your own and play around with the text styling / scale of text and image, and subsequently download the entire page as a standalone HTML page, with its own internal CSS stylesheet.

Development

# clone project
git clone https://github.com/yihui-hu/yop
cd yop

# install dependencies
npm install

# run project
npm run dev

Resources

1. Importing text file
2. Parsing params with onChange event
3. Passing functions as props in React + TypeScript
4. Client components and "use client" directive in Next.js
5. Showing leading and trailing whitespace in HTML
6. Converting callbacks to promises
7. Using async functions within useEffect
8. Destructuring first few items from an array
9. Customizing file upload button / <input type="file" />
10. How and when to debounce / throttle
    • Debouncing – delaying the first process for a given amount of time to see if user performs another action; if they do, cancel first action and work on second one
    • Throttling – preventing second process from happening by making sure function can only run once in a given interval
11. Lodash debouncing with text input