technique-researchlisted

# Technique research `frontend-craft` already sends you to look at the category. That pass answers *what does this look like* — it screenshots a page and you read the image. This one answers a different question: **how does it work.** You cannot get that from a picture, and you should not get it from an article. Articles describe what someone built a year ago; the live page is the thing that is true now. ## Read the artifact, not the writing about it Go to a real implementation and inspect it. `javascript_tool` runs a query against the live DOM and `read_page` returns the accessibility tree — between them you can see the mechanism directly. What you are extracting is **mechanism, not aesthetic**: the properties that move, the attribute names, how media is loaded and when, what happens on a slow connection, what the fallback is. "Dark ground with a serif headline" is not a finding. This is: ```js // what is actually on the page ({ videos: document.querySelectorAll('video').length, canvases: document.querySelectorAll('canvas').length, sticky: [...document.querySelectorAll('*')] .filter(e => getComputedStyle(e).position === 'sticky').length, attrs: [...new Set([...document.querySelectorAll('video')] .flatMap(v => [...v.attributes].map(a => a.name)))], backdrop: [...new Set([...document.querySelectorAll('*')] .map(e => getComputedStyle(e).backdropFilter).filter(v => v && v !== 'none'))], }) ``` A real study of a shipping product page returned sixteen