⚠️ Note 2023-01-21
Some things have changed since I originally wrote this in 2016. I have updated a few minor details, and the advice is still broadly the same, but there are some new Cloudflare features you can (and should) take advantage of. In particular, pay attention to Trevor Stevens' comment here from 22 January 2022, and Matt Stenson's useful caching advice. In addition, Backblaze, with whom Cloudflare are a Bandwidth Alliance partner, have published their own guide detailing how to use Cloudflare's Web Workers to cache content from B2 private buckets. That is worth reading,
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Responsible for preloading links | |
// Based on this https://gist.github.com/vitobotta/8ac3c6f65633b5edb2949aeff0dec69b | |
// Uses https://github.com/stimulus-use/stimulus-use | |
import { Controller } from '@hotwired/stimulus' | |
import { useHover } from 'stimulus-use' | |
export default class extends Controller { | |
connect() { | |
useHover(this, { element: this.element }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* InstantClick 3.1.0 | (C) 2014-2017 Alexandre Dieulot | http://instantclick.io/license */ | |
var instantclick, | |
InstantClick = (instantclick = (function(document, location, $userAgent) { | |
// Internal variables | |
var $currentLocationWithoutHash, | |
$urlToPreload, | |
$preloadTimer, | |
$lastTouchTimestamp, | |
$hasBeenInitialized, |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const hoverTime = 400 | |
const fetchers = {} | |
const doc = document.implementation.createHTMLDocument('prefetch') | |
function fetchPage (url, success) { | |
const xhr = new XMLHttpRequest() | |
xhr.open('GET', url) | |
xhr.setRequestHeader('VND.PREFETCH', 'true') | |
xhr.setRequestHeader('Accept', 'text/html') | |
xhr.onreadystatechange = () => { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var mediaJSON = { "categories" : [ { "name" : "Movies", | |
"videos" : [ | |
{ "description" : "Big Buck Bunny tells the story of a giant rabbit with a heart bigger than himself. When one sunny day three rodents rudely harass him, something snaps... and the rabbit ain't no bunny anymore! In the typical cartoon tradition he prepares the nasty rodents a comical revenge.\n\nLicensed under the Creative Commons Attribution license\nhttp://www.bigbuckbunny.org", | |
"sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" ], | |
"subtitle" : "By Blender Foundation", | |
"thumb" : "images/BigBuckBunny.jpg", | |
"title" : "Big Buck Bunny" | |
}, | |
{ "description" : "The first Blender Open Movie from 2006", | |
"sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" ], |