yoink!

Welcome to yoink! This is intended to be a tool for static websites to allow for faster navigations. Links are pre-loaded, pre-rendered, and cached when the website detects intent to load a new page (ex. hovering a link).

Find me on github: github.com/vartan/yoink

Check out this second page to play around with navigation.

How to use yoink

1. Wrap the dynamic part of your website in an element with the ID and className yoink-content.
2. For each static page, make a .partial.html equivalent which contains only the contents of the yoink-content block. For example, if you have foo.html make a sibling foo.partial.html.
3. Add yoink.js to your pages.

How yoink works

Links are pre-fetched under the following conditions:

• When the pointer moves over the link (for mouses and touchpads)
• When a touch starts (for touch screens)
• When it is focused (for screen readers and keyboard-navigators)

Once a link is prefetched, it is rendered in an offscreen element in order to preload any contained images, as well as to minimize layout costs for later. After it is painted, it is styled with display: none to minimize any performance impact while it is hidden.

When the link is clicked, the currently displayed content is swapped with the hidden offscreen content.

TODOs & future ideas

• Dynamic title support.
• Disable prefetching for external & unsupported links.
• Allow annotating links for immediate prefetch.
• Consider using service worker for offline caching & prioritization.
• Convert to TypeScript.
• Integrate with a static site generator.
• Limit the size of the cache.